@posiwise/admin-module 0.0.232 → 0.0.233

package/fesm2022/posiwise-admin-module.mjs

@@ -1503,8 +1503,9 @@ class DomainConfigCoreComponent extends AppBaseComponent {
         this.buttonBusy = false;
         this.routers = ROUTERS;
         this.layoutOptions = [
-            { label: 'Layout 1', value: 'Layout-1' },
-            { label: 'Layout 2', value: 'Layout-2' }
+            { label: 'Layout 1 - Default', value: 'Layout-1' },
+            { label: 'Layout 2 - Rounded', value: 'Layout-2' },
+            { label: 'Layout 3 - Squared', value: 'Layout-3' }
         ];
         this.form = AppAdmin.domainConfigCoreForm();
     }
@@ -1589,7 +1590,7 @@ class DomainConfigCoreComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DomainConfigCoreComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DomainConfigCoreComponent, isStandalone: false, selector: "pw-domain-config-core", usesInheritance: true, ngImport: i0, template: "<h3>Core Configuration</h3>\n<div>\n  <p class=\"mb-5\">The following details are required to correctly set up your domain.<br/>\n    Make sure each field is completed accurately to ensure smooth operation and full feature access.\n  </p>\n</div>\n@if (isLoading) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n@if (!isLoading) {\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CompanyName' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyName' | transloco\" name=\"company_name\" controlId=\"domain-core-company_name\">\n          <input type=\"text\" id=\"domain-core-company_name\" class=\"form-control\" formControlName=\"company_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CompanyName' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_name'].errors }\" name=\"input_company_name_1\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CompanyEmail' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyEmail' | transloco\" name=\"company_email\" controlId=\"domain-core-company_email\">\n          <input type=\"text\" id=\"domain-core-company_email\" class=\"form-control\" formControlName=\"company_email\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CompanyEmail' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_email'].errors }\" name=\"input_company_email_2\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CompanyUrl' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyUrl' | transloco\" name=\"company_url\" controlId=\"domain-core-company_url\">\n          <input type=\"text\" id=\"domain-core-company_url\" class=\"form-control\" formControlName=\"company_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" name=\"input_company_url_3\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\" *rbacAllow=\"'Pages.SuperAdmin'\">\n        <pw-input-container\n          [label]=\"'Layout'\"\n          [errorMsg]=\"'Layout is required'\"\n          name=\"layout\" controlId=\"domain-core-layout\" [useAriaLabelledbyOnly]=\"true\">\n          <p-select\n            [attr.aria-labelledby]=\"'domain-core-layout-label'\"\n            formControlName=\"layout\"\n            [options]=\"layoutOptions\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [placeholder]=\"'Admin.DomainConfig.Placeholder.Layout' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['layout'].errors }\">\n          </p-select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\"\n          [label]=\"'Admin.DomainConfig.HostName' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.HostName' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.HostName' | transloco\"\n          name=\"host_name\" controlId=\"domain-core-host_name\">\n          <input type=\"text\"\n            id=\"domain-core-host_name\"\n            class=\"form-control\"\n            formControlName=\"host_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HostName' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['host_name'].errors }\" name=\"input_host_name_4\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\"\n          [label]=\"'Admin.DomainConfig.InternalPath' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.InternalPath' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.InternalPath' | transloco\"\n          name=\"internal_path\" controlId=\"domain-core-internal_path\">\n          <input type=\"text\"\n            id=\"domain-core-internal_path\"\n            class=\"form-control\"\n            formControlName=\"internal_path\" [placeholder]=\"'Admin.DomainConfig.Placeholder.InternalPath' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['internal_path'].errors }\" name=\"input_internal_path_5\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\" [label]=\"'Admin.DomainConfig.Description' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.Description'| transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.Description' | transloco\" name=\"description\" controlId=\"domain-core-description\">\n          <input type=\"text\" id=\"domain-core-description\" class=\"form-control\" formControlName=\"description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\" name=\"input_description_6\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\" [label]=\"'Admin.DomainConfig.FrontendRepoName' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.FrontendRepoName'| transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.FrontendRepoName' | transloco\" name=\"frontend_repo_name\" controlId=\"domain-core-frontend_repo_name\">\n          <input type=\"text\" id=\"domain-core-frontend_repo_name\" class=\"form-control\" formControlName=\"frontend_repo_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.FrontendRepoName' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['frontend_repo_name'].errors }\" name=\"input_frontend_repo_name_7\"/>\n        </pw-input-container>\n      </div>\n      <ng-container>\n        <h3 class=\"mt-4\">Database and Webhook Configuration</h3>\n        <p class=\"mb-5\">These settings control database and webhook integrations.<br/>\n        Do not modify them unless you\u2019re confident in what you\u2019re doing \u2014 incorrect changes may disrupt system functionality.</p>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.ShardName' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardName' | transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.ShardName' | transloco\"\n            name=\"shard_name\" controlId=\"domain-core-shard_name\">\n            <input type=\"text\"\n              id=\"domain-core-shard_name\"\n              class=\"form-control\"\n              formControlName=\"shard_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ShardName' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['shard_name'].errors }\" name=\"input_shard_name_8\"/>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.ShardUrl' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardUrl' | transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.ShardUrl' | transloco\"\n            name=\"shard_url\" controlId=\"domain-core-shard_url\">\n            <input type=\"text\"\n              id=\"domain-core-shard_url\"\n              class=\"form-control\"\n              formControlName=\"shard_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['shard_url'].errors }\" name=\"input_shard_url_9\"/>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.IntraServicesToken' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.IntraServicesToken'| transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.IntraServicesToken' | transloco\"\n            name=\"intraservices_token\" controlId=\"domain-core-intraservices_token\">\n            <input type=\"text\"\n              id=\"domain-core-intraservices_token\"\n              class=\"form-control\"\n              formControlName=\"intraservices_token\" [placeholder]=\"'Admin.DomainConfig.Placeholder.IntraServicesToken' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['intraservices_token'].errors }\" name=\"input_intraservices_token_10\"/>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.WebhookToken' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.WebhookToken'| transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.WebhookToken' | transloco\"\n            name=\"webhook_token\" controlId=\"domain-core-webhook_token\">\n            <input type=\"text\"\n              id=\"domain-core-webhook_token\"\n              class=\"form-control\"\n              formControlName=\"webhook_token\" [placeholder]=\"'Admin.DomainConfig.Placeholder.WebhookToken' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['webhook_token'].errors }\" name=\"input_webhook_token_11\"/>\n          </pw-input-container>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"col-12 text-end mt-3\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"back()\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n      class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n}\n", dependencies: [{ kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i7.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DomainConfigCoreComponent, isStandalone: false, selector: "pw-domain-config-core", usesInheritance: true, ngImport: i0, template: "<h3>Core Configuration</h3>\n<div>\n  <p class=\"mb-5\">The following details are required to correctly set up your domain.<br/>\n    Make sure each field is completed accurately to ensure smooth operation and full feature access.\n  </p>\n</div>\n@if (isLoading) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n@if (!isLoading) {\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CompanyName' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyName' | transloco\" name=\"company_name\" controlId=\"domain-core-company_name\">\n          <input type=\"text\" id=\"domain-core-company_name\" class=\"form-control\" formControlName=\"company_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CompanyName' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_name'].errors }\" name=\"input_company_name_1\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CompanyEmail' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyEmail' | transloco\" name=\"company_email\" controlId=\"domain-core-company_email\">\n          <input type=\"text\" id=\"domain-core-company_email\" class=\"form-control\" formControlName=\"company_email\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CompanyEmail' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_email'].errors }\" name=\"input_company_email_2\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CompanyUrl' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyUrl' | transloco\" name=\"company_url\" controlId=\"domain-core-company_url\">\n          <input type=\"text\" id=\"domain-core-company_url\" class=\"form-control\" formControlName=\"company_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" name=\"input_company_url_3\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\" *rbacAllow=\"'Pages.SuperAdmin'\">\n        <pw-input-container\n          [label]=\"'Admin.DomainConfig.DashboardLayout' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.DashboardLayout' | transloco\"\n          name=\"layout\" controlId=\"domain-core-layout\" [useAriaLabelledbyOnly]=\"true\">\n          <p-select\n            [attr.aria-labelledby]=\"'domain-core-layout-label'\"\n            formControlName=\"layout\"\n            [options]=\"layoutOptions\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [placeholder]=\"'Admin.DomainConfig.Placeholder.Layout' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['layout'].errors }\">\n          </p-select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\"\n          [label]=\"'Admin.DomainConfig.HostName' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.HostName' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.HostName' | transloco\"\n          name=\"host_name\" controlId=\"domain-core-host_name\">\n          <input type=\"text\"\n            id=\"domain-core-host_name\"\n            class=\"form-control\"\n            formControlName=\"host_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HostName' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['host_name'].errors }\" name=\"input_host_name_4\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\"\n          [label]=\"'Admin.DomainConfig.InternalPath' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.InternalPath' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.InternalPath' | transloco\"\n          name=\"internal_path\" controlId=\"domain-core-internal_path\">\n          <input type=\"text\"\n            id=\"domain-core-internal_path\"\n            class=\"form-control\"\n            formControlName=\"internal_path\" [placeholder]=\"'Admin.DomainConfig.Placeholder.InternalPath' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['internal_path'].errors }\" name=\"input_internal_path_5\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\" [label]=\"'Admin.DomainConfig.Description' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.Description'| transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.Description' | transloco\" name=\"description\" controlId=\"domain-core-description\">\n          <input type=\"text\" id=\"domain-core-description\" class=\"form-control\" formControlName=\"description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\" name=\"input_description_6\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\" [label]=\"'Admin.DomainConfig.FrontendRepoName' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.FrontendRepoName'| transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.FrontendRepoName' | transloco\" name=\"frontend_repo_name\" controlId=\"domain-core-frontend_repo_name\">\n          <input type=\"text\" id=\"domain-core-frontend_repo_name\" class=\"form-control\" formControlName=\"frontend_repo_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.FrontendRepoName' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['frontend_repo_name'].errors }\" name=\"input_frontend_repo_name_7\"/>\n        </pw-input-container>\n      </div>\n      <ng-container>\n        <h3 class=\"mt-4\">Database and Webhook Configuration</h3>\n        <p class=\"mb-5\">These settings control database and webhook integrations.<br/>\n        Do not modify them unless you\u2019re confident in what you\u2019re doing \u2014 incorrect changes may disrupt system functionality.</p>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.ShardName' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardName' | transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.ShardName' | transloco\"\n            name=\"shard_name\" controlId=\"domain-core-shard_name\">\n            <input type=\"text\"\n              id=\"domain-core-shard_name\"\n              class=\"form-control\"\n              formControlName=\"shard_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ShardName' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['shard_name'].errors }\" name=\"input_shard_name_8\"/>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.ShardUrl' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardUrl' | transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.ShardUrl' | transloco\"\n            name=\"shard_url\" controlId=\"domain-core-shard_url\">\n            <input type=\"text\"\n              id=\"domain-core-shard_url\"\n              class=\"form-control\"\n              formControlName=\"shard_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['shard_url'].errors }\" name=\"input_shard_url_9\"/>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.IntraServicesToken' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.IntraServicesToken'| transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.IntraServicesToken' | transloco\"\n            name=\"intraservices_token\" controlId=\"domain-core-intraservices_token\">\n            <input type=\"text\"\n              id=\"domain-core-intraservices_token\"\n              class=\"form-control\"\n              formControlName=\"intraservices_token\" [placeholder]=\"'Admin.DomainConfig.Placeholder.IntraServicesToken' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['intraservices_token'].errors }\" name=\"input_intraservices_token_10\"/>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.WebhookToken' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.WebhookToken'| transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.WebhookToken' | transloco\"\n            name=\"webhook_token\" controlId=\"domain-core-webhook_token\">\n            <input type=\"text\"\n              id=\"domain-core-webhook_token\"\n              class=\"form-control\"\n              formControlName=\"webhook_token\" [placeholder]=\"'Admin.DomainConfig.Placeholder.WebhookToken' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['webhook_token'].errors }\" name=\"input_webhook_token_11\"/>\n          </pw-input-container>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"col-12 text-end mt-3\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"back()\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n      class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n}\n", dependencies: [{ kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i7.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -1599,7 +1600,7 @@ __decorate([
 ], DomainConfigCoreComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DomainConfigCoreComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-domain-config-core', standalone: false, template: "<h3>Core Configuration</h3>\n<div>\n  <p class=\"mb-5\">The following details are required to correctly set up your domain.<br/>\n    Make sure each field is completed accurately to ensure smooth operation and full feature access.\n  </p>\n</div>\n@if (isLoading) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n@if (!isLoading) {\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CompanyName' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyName' | transloco\" name=\"company_name\" controlId=\"domain-core-company_name\">\n          <input type=\"text\" id=\"domain-core-company_name\" class=\"form-control\" formControlName=\"company_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CompanyName' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_name'].errors }\" name=\"input_company_name_1\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CompanyEmail' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyEmail' | transloco\" name=\"company_email\" controlId=\"domain-core-company_email\">\n          <input type=\"text\" id=\"domain-core-company_email\" class=\"form-control\" formControlName=\"company_email\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CompanyEmail' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_email'].errors }\" name=\"input_company_email_2\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CompanyUrl' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyUrl' | transloco\" name=\"company_url\" controlId=\"domain-core-company_url\">\n          <input type=\"text\" id=\"domain-core-company_url\" class=\"form-control\" formControlName=\"company_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" name=\"input_company_url_3\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\" *rbacAllow=\"'Pages.SuperAdmin'\">\n        <pw-input-container\n          [label]=\"'Layout'\"\n          [errorMsg]=\"'Layout is required'\"\n          name=\"layout\" controlId=\"domain-core-layout\" [useAriaLabelledbyOnly]=\"true\">\n          <p-select\n            [attr.aria-labelledby]=\"'domain-core-layout-label'\"\n            formControlName=\"layout\"\n            [options]=\"layoutOptions\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [placeholder]=\"'Admin.DomainConfig.Placeholder.Layout' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['layout'].errors }\">\n          </p-select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\"\n          [label]=\"'Admin.DomainConfig.HostName' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.HostName' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.HostName' | transloco\"\n          name=\"host_name\" controlId=\"domain-core-host_name\">\n          <input type=\"text\"\n            id=\"domain-core-host_name\"\n            class=\"form-control\"\n            formControlName=\"host_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HostName' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['host_name'].errors }\" name=\"input_host_name_4\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\"\n          [label]=\"'Admin.DomainConfig.InternalPath' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.InternalPath' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.InternalPath' | transloco\"\n          name=\"internal_path\" controlId=\"domain-core-internal_path\">\n          <input type=\"text\"\n            id=\"domain-core-internal_path\"\n            class=\"form-control\"\n            formControlName=\"internal_path\" [placeholder]=\"'Admin.DomainConfig.Placeholder.InternalPath' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['internal_path'].errors }\" name=\"input_internal_path_5\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\" [label]=\"'Admin.DomainConfig.Description' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.Description'| transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.Description' | transloco\" name=\"description\" controlId=\"domain-core-description\">\n          <input type=\"text\" id=\"domain-core-description\" class=\"form-control\" formControlName=\"description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\" name=\"input_description_6\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\" [label]=\"'Admin.DomainConfig.FrontendRepoName' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.FrontendRepoName'| transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.FrontendRepoName' | transloco\" name=\"frontend_repo_name\" controlId=\"domain-core-frontend_repo_name\">\n          <input type=\"text\" id=\"domain-core-frontend_repo_name\" class=\"form-control\" formControlName=\"frontend_repo_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.FrontendRepoName' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['frontend_repo_name'].errors }\" name=\"input_frontend_repo_name_7\"/>\n        </pw-input-container>\n      </div>\n      <ng-container>\n        <h3 class=\"mt-4\">Database and Webhook Configuration</h3>\n        <p class=\"mb-5\">These settings control database and webhook integrations.<br/>\n        Do not modify them unless you\u2019re confident in what you\u2019re doing \u2014 incorrect changes may disrupt system functionality.</p>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.ShardName' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardName' | transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.ShardName' | transloco\"\n            name=\"shard_name\" controlId=\"domain-core-shard_name\">\n            <input type=\"text\"\n              id=\"domain-core-shard_name\"\n              class=\"form-control\"\n              formControlName=\"shard_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ShardName' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['shard_name'].errors }\" name=\"input_shard_name_8\"/>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.ShardUrl' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardUrl' | transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.ShardUrl' | transloco\"\n            name=\"shard_url\" controlId=\"domain-core-shard_url\">\n            <input type=\"text\"\n              id=\"domain-core-shard_url\"\n              class=\"form-control\"\n              formControlName=\"shard_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['shard_url'].errors }\" name=\"input_shard_url_9\"/>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.IntraServicesToken' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.IntraServicesToken'| transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.IntraServicesToken' | transloco\"\n            name=\"intraservices_token\" controlId=\"domain-core-intraservices_token\">\n            <input type=\"text\"\n              id=\"domain-core-intraservices_token\"\n              class=\"form-control\"\n              formControlName=\"intraservices_token\" [placeholder]=\"'Admin.DomainConfig.Placeholder.IntraServicesToken' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['intraservices_token'].errors }\" name=\"input_intraservices_token_10\"/>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.WebhookToken' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.WebhookToken'| transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.WebhookToken' | transloco\"\n            name=\"webhook_token\" controlId=\"domain-core-webhook_token\">\n            <input type=\"text\"\n              id=\"domain-core-webhook_token\"\n              class=\"form-control\"\n              formControlName=\"webhook_token\" [placeholder]=\"'Admin.DomainConfig.Placeholder.WebhookToken' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['webhook_token'].errors }\" name=\"input_webhook_token_11\"/>\n          </pw-input-container>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"col-12 text-end mt-3\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"back()\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n      class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n}\n" }]
+            args: [{ selector: 'pw-domain-config-core', standalone: false, template: "<h3>Core Configuration</h3>\n<div>\n  <p class=\"mb-5\">The following details are required to correctly set up your domain.<br/>\n    Make sure each field is completed accurately to ensure smooth operation and full feature access.\n  </p>\n</div>\n@if (isLoading) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n@if (!isLoading) {\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CompanyName' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyName' | transloco\" name=\"company_name\" controlId=\"domain-core-company_name\">\n          <input type=\"text\" id=\"domain-core-company_name\" class=\"form-control\" formControlName=\"company_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CompanyName' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_name'].errors }\" name=\"input_company_name_1\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CompanyEmail' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyEmail' | transloco\" name=\"company_email\" controlId=\"domain-core-company_email\">\n          <input type=\"text\" id=\"domain-core-company_email\" class=\"form-control\" formControlName=\"company_email\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CompanyEmail' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_email'].errors }\" name=\"input_company_email_2\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CompanyUrl' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyUrl' | transloco\" name=\"company_url\" controlId=\"domain-core-company_url\">\n          <input type=\"text\" id=\"domain-core-company_url\" class=\"form-control\" formControlName=\"company_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" name=\"input_company_url_3\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\" *rbacAllow=\"'Pages.SuperAdmin'\">\n        <pw-input-container\n          [label]=\"'Admin.DomainConfig.DashboardLayout' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.DashboardLayout' | transloco\"\n          name=\"layout\" controlId=\"domain-core-layout\" [useAriaLabelledbyOnly]=\"true\">\n          <p-select\n            [attr.aria-labelledby]=\"'domain-core-layout-label'\"\n            formControlName=\"layout\"\n            [options]=\"layoutOptions\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [placeholder]=\"'Admin.DomainConfig.Placeholder.Layout' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['layout'].errors }\">\n          </p-select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\"\n          [label]=\"'Admin.DomainConfig.HostName' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.HostName' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.HostName' | transloco\"\n          name=\"host_name\" controlId=\"domain-core-host_name\">\n          <input type=\"text\"\n            id=\"domain-core-host_name\"\n            class=\"form-control\"\n            formControlName=\"host_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HostName' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['host_name'].errors }\" name=\"input_host_name_4\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\"\n          [label]=\"'Admin.DomainConfig.InternalPath' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.InternalPath' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.InternalPath' | transloco\"\n          name=\"internal_path\" controlId=\"domain-core-internal_path\">\n          <input type=\"text\"\n            id=\"domain-core-internal_path\"\n            class=\"form-control\"\n            formControlName=\"internal_path\" [placeholder]=\"'Admin.DomainConfig.Placeholder.InternalPath' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['internal_path'].errors }\" name=\"input_internal_path_5\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\" [label]=\"'Admin.DomainConfig.Description' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.Description'| transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.Description' | transloco\" name=\"description\" controlId=\"domain-core-description\">\n          <input type=\"text\" id=\"domain-core-description\" class=\"form-control\" formControlName=\"description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\" name=\"input_description_6\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [showTooltip]=\"true\" [label]=\"'Admin.DomainConfig.FrontendRepoName' | transloco\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.FrontendRepoName'| transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.FrontendRepoName' | transloco\" name=\"frontend_repo_name\" controlId=\"domain-core-frontend_repo_name\">\n          <input type=\"text\" id=\"domain-core-frontend_repo_name\" class=\"form-control\" formControlName=\"frontend_repo_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.FrontendRepoName' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['frontend_repo_name'].errors }\" name=\"input_frontend_repo_name_7\"/>\n        </pw-input-container>\n      </div>\n      <ng-container>\n        <h3 class=\"mt-4\">Database and Webhook Configuration</h3>\n        <p class=\"mb-5\">These settings control database and webhook integrations.<br/>\n        Do not modify them unless you\u2019re confident in what you\u2019re doing \u2014 incorrect changes may disrupt system functionality.</p>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.ShardName' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardName' | transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.ShardName' | transloco\"\n            name=\"shard_name\" controlId=\"domain-core-shard_name\">\n            <input type=\"text\"\n              id=\"domain-core-shard_name\"\n              class=\"form-control\"\n              formControlName=\"shard_name\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ShardName' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['shard_name'].errors }\" name=\"input_shard_name_8\"/>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.ShardUrl' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardUrl' | transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.ShardUrl' | transloco\"\n            name=\"shard_url\" controlId=\"domain-core-shard_url\">\n            <input type=\"text\"\n              id=\"domain-core-shard_url\"\n              class=\"form-control\"\n              formControlName=\"shard_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['shard_url'].errors }\" name=\"input_shard_url_9\"/>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.IntraServicesToken' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.IntraServicesToken'| transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.IntraServicesToken' | transloco\"\n            name=\"intraservices_token\" controlId=\"domain-core-intraservices_token\">\n            <input type=\"text\"\n              id=\"domain-core-intraservices_token\"\n              class=\"form-control\"\n              formControlName=\"intraservices_token\" [placeholder]=\"'Admin.DomainConfig.Placeholder.IntraServicesToken' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['intraservices_token'].errors }\" name=\"input_intraservices_token_10\"/>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [label]=\"'Admin.DomainConfig.WebhookToken' | transloco\"\n            [tooltipText]=\"'Admin.DomainConfig.Tooltip.WebhookToken'| transloco\"\n            [errorMsg]=\"'Admin.DomainConfig.Validation.WebhookToken' | transloco\"\n            name=\"webhook_token\" controlId=\"domain-core-webhook_token\">\n            <input type=\"text\"\n              id=\"domain-core-webhook_token\"\n              class=\"form-control\"\n              formControlName=\"webhook_token\" [placeholder]=\"'Admin.DomainConfig.Placeholder.WebhookToken' | transloco\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['webhook_token'].errors }\" name=\"input_webhook_token_11\"/>\n          </pw-input-container>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"col-12 text-end mt-3\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"back()\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n      class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }, { type: i0.ChangeDetectorRef }], propDecorators: { onSave: [] } });
 
 class BaseDomainConfigComponent extends AppBaseComponent {
@@ -1840,37 +1841,48 @@ const DOMAIN_COLOR_THEMES = [
             color_code_sidebar_bg: '#202020',
             color_code_sidebar_text: '#f5f7fa',
             color_code_tabs_bg: '#3d90bd',
-            color_code_tabs_text: '#ffffff'
+            color_code_tabs_text: '#ffffff',
+            color_code_dashboard_bg: '#f5f7fa',
+            color_code_dashboard_text: '#222222'
         }
     },
-    // Theme 1 — Rose
+    // Theme 1 — Anthropic Inspired
+    // Values pulled directly from anthropic.com's live CSS.
     {
         label: '1',
+        name: 'Anthropic Inspired',
         colors: {
-            color_code_first: '#e11d48',
-            color_code_second: '#be123c',
-            color_code_third: '#ffe4e6',
-            color_code_titles: '#1f2937',
-            color_code_text: '#334155',
-            color_code_sidebar_bg: '#4c0519',
-            color_code_sidebar_text: '#ffe4e6',
-            color_code_tabs_bg: '#e11d48',
-            color_code_tabs_text: '#ffffff'
+            color_code_first: '#d97757',
+            color_code_second: '#b8563d',
+            color_code_third: '#f0eee6',
+            color_code_titles: '#141413',
+            color_code_text: '#3d3d3a',
+            color_code_sidebar_bg: '#faf9f5',
+            color_code_sidebar_text: '#141413',
+            color_code_tabs_bg: '#d97757',
+            color_code_tabs_text: '#ffffff',
+            color_code_dashboard_bg: '#f0eee6',
+            color_code_dashboard_text: '#141413'
         }
     },
-    // Theme 2 — Indigo Slate
+    // Theme 2 — Stripe Inspired
+    // Matches the actual Stripe dashboard: white sidebar with dark slate
+    // text, purple primary (#635bff), light content surface, navy titles.
     {
         label: '2',
+        name: 'Stripe Inspired',
         colors: {
-            color_code_first: '#4f46e5',
-            color_code_second: '#6366f1',
+            color_code_first: '#635bff',
+            color_code_second: '#533afd',
             color_code_third: '#e0e7ff',
-            color_code_titles: '#1e293b',
-            color_code_text: '#334155',
-            color_code_sidebar_bg: '#1e1b4b',
-            color_code_sidebar_text: '#e0e7ff',
-            color_code_tabs_bg: '#4f46e5',
-            color_code_tabs_text: '#ffffff'
+            color_code_titles: '#0A2540',
+            color_code_text: '#425466',
+            color_code_sidebar_bg: '#ffffff',
+            color_code_sidebar_text: '#3c4257',
+            color_code_tabs_bg: '#635bff',
+            color_code_tabs_text: '#ffffff',
+            color_code_dashboard_bg: '#f6f9fc',
+            color_code_dashboard_text: '#0A2540'
         }
     },
     // Theme 3 — Emerald
@@ -1885,7 +1897,9 @@ const DOMAIN_COLOR_THEMES = [
             color_code_sidebar_bg: '#064e3b',
             color_code_sidebar_text: '#d1fae5',
             color_code_tabs_bg: '#059669',
-            color_code_tabs_text: '#ffffff'
+            color_code_tabs_text: '#ffffff',
+            color_code_dashboard_bg: '#f0fdf4',
+            color_code_dashboard_text: '#064e3b'
         }
     },
     // Theme 4 — Graphite Amber
@@ -1900,7 +1914,9 @@ const DOMAIN_COLOR_THEMES = [
             color_code_sidebar_bg: '#1c1917',
             color_code_sidebar_text: '#fafaf9',
             color_code_tabs_bg: '#292524',
-            color_code_tabs_text: '#fbbf24'
+            color_code_tabs_text: '#fbbf24',
+            color_code_dashboard_bg: '#fafaf9',
+            color_code_dashboard_text: '#1c1917'
         }
     },
     // Theme 5 — Teal Ocean
@@ -1915,7 +1931,9 @@ const DOMAIN_COLOR_THEMES = [
             color_code_sidebar_bg: '#0f172a',
             color_code_sidebar_text: '#ccfbf1',
             color_code_tabs_bg: '#0d9488',
-            color_code_tabs_text: '#ffffff'
+            color_code_tabs_text: '#ffffff',
+            color_code_dashboard_bg: '#f0fdfa',
+            color_code_dashboard_text: '#134e4a'
         }
     }
 ];
@@ -2046,7 +2064,7 @@ class DomainConfigInterfaceComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DomainConfigInterfaceComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DomainConfigInterfaceComponent, isStandalone: false, selector: "pw-domain-config-interface", viewQueries: [{ propertyName: "uploader", predicate: CustomUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (isLoading) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n@if (data?.host_name) {\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <h3>Colors</h3>\n    <div class=\"default-color-code-section mb-4\">\n      <p class=\"mb-0\">Pick a preset theme to apply a full colour scheme, then fine-tune any colour below.</p>\n      <div class=\"theme-presets\">\n        @for (theme of colorThemes; track theme.label) {\n          <a class=\"btn btn-sm btn-outline-primary build-action-button\"\n            [attr.data-cy]=\"'theme-preset-' + theme.label\"\n            (click)=\"applyColorTheme(theme)\">\n            {{ theme.name || (('Admin.DomainConfig.Theme' | transloco) + ' ' + theme.label) }}\n          </a>\n        }\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeFirst' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeFirst' | transloco\"\n          name=\"color_code_first\" controlId=\"domain-interface-color_code_first\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_first\"\n            class=\"form-control\"\n            formControlName=\"color_code_first\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_first'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeSecond' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeSecond' | transloco\"\n          name=\"color_code_second\" controlId=\"domain-interface-color_code_second\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_second\"\n            class=\"form-control\"\n            formControlName=\"color_code_second\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_second'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeThird' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeThird' | transloco\"\n          name=\"color_code_third\" controlId=\"domain-interface-color_code_third\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_third\"\n            class=\"form-control\"\n            formControlName=\"color_code_third\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_third'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeTitles' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeTitles' | transloco\"\n          name=\"color_code_titles\" controlId=\"domain-interface-color_code_titles\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_titles\"\n            class=\"form-control\"\n            formControlName=\"color_code_titles\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_titles'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeText' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeText' | transloco\"\n          name=\"color_code_text\" controlId=\"domain-interface-color_code_text\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_text\"\n            class=\"form-control\"\n            formControlName=\"color_code_text\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_text'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeSidebarBg' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeSidebarBg' | transloco\"\n          name=\"color_code_sidebar_bg\" controlId=\"domain-interface-color_code_sidebar_bg\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_sidebar_bg\"\n            class=\"form-control\"\n            formControlName=\"color_code_sidebar_bg\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_sidebar_bg'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeSidebarText' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeSidebarText' | transloco\"\n          name=\"color_code_sidebar_text\" controlId=\"domain-interface-color_code_sidebar_text\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_sidebar_text\"\n            class=\"form-control\"\n            formControlName=\"color_code_sidebar_text\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_sidebar_text'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeTabsBg' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeTabsBg' | transloco\"\n          name=\"color_code_tabs_bg\" controlId=\"domain-interface-color_code_tabs_bg\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_tabs_bg\"\n            class=\"form-control\"\n            formControlName=\"color_code_tabs_bg\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_tabs_bg'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeTabsText' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeTabsText' | transloco\"\n          name=\"color_code_tabs_text\" controlId=\"domain-interface-color_code_tabs_text\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_tabs_text\"\n            class=\"form-control\"\n            formControlName=\"color_code_tabs_text\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_tabs_text'].errors }\" />\n        </pw-input-container>\n      </div>\n    </div>\n    <h3>Logos</h3>\n    <div class=\"mb-3\">\n      <p>\n        These logos are required and used across the platform on various pages, including the header on public pages and the dashboard.\n      </p>\n    </div>\n    <div class=\"row gy-4\"\n      matchHeight=\"card\">\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_main-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoMain' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_main-label'\"\n          [aspectRatio]=\"'fullLogo'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Main'\"\n          [previewData]=\"data['logo_main']\"\n        controlName=\"logo_main\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_main_dark-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoMainDark' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_main_dark-label'\"\n          [aspectRatio]=\"'fullLogo'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Main Dark'\"\n          [previewData]=\"data['logo_main_dark']\"\n        controlName=\"logo_main_dark\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_main_contrast-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoMainContrast' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_main_contrast-label'\"\n          [aspectRatio]=\"'fullLogo'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Main Contrast'\"\n          [previewData]=\"data['logo_main_contrast']\"\n        controlName=\"logo_main_contrast\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_squared_main-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoSquaredMain' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_squared_main-label'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Squared Main'\"\n          [previewData]=\"data['logo_squared_main']\"\n        controlName=\"logo_squared_main\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_squared_dark-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoSquaredDark' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_squared_dark-label'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Squared Dark'\"\n          [previewData]=\"data['logo_squared_dark']\"\n        controlName=\"logo_squared_dark\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_squared_contrast-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoSquaredContrast' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_squared_contrast-label'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Squared Contrast'\"\n          [previewData]=\"data['logo_squared_contrast']\"\n        controlName=\"logo_squared_contrast\"></pw-custom-uploader>\n      </div>\n    </div>\n    <div class=\"col-12 text-end mt-5\">\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\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n}\n@if (!data?.host_name && !isLoading) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"></pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.default-color-code-section{gap:2em;justify-content:space-between;align-items:center;display:flex;flex-wrap:wrap;margin-bottom:1rem}.theme-presets{display:flex;flex-wrap:wrap;gap:.5rem}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i13$1.CustomUploaderComponent, selector: "pw-custom-uploader", inputs: ["controlName", "previewData", "aspectRatio", "title"], outputs: ["saveEvent"] }, { kind: "component", type: i3$2.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i7.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DomainConfigInterfaceComponent, isStandalone: false, selector: "pw-domain-config-interface", viewQueries: [{ propertyName: "uploader", predicate: CustomUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (isLoading) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n@if (data?.host_name) {\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <h3>Colors</h3>\n    <div class=\"default-color-code-section mb-4\">\n      <p class=\"mb-0\">Pick a preset theme to apply a full colour scheme, then fine-tune any colour below.</p>\n      <div class=\"theme-presets\">\n        @for (theme of colorThemes; track theme.label) {\n          <a class=\"btn btn-sm btn-outline-primary build-action-button\"\n            [attr.data-cy]=\"'theme-preset-' + theme.label\"\n            (click)=\"applyColorTheme(theme)\">\n            {{ theme.name || (('Admin.DomainConfig.Theme' | transloco) + ' ' + theme.label) }}\n          </a>\n        }\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeFirst' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeFirst' | transloco\"\n          name=\"color_code_first\" controlId=\"domain-interface-color_code_first\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_first\"\n            class=\"form-control\"\n            formControlName=\"color_code_first\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_first'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeSecond' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeSecond' | transloco\"\n          name=\"color_code_second\" controlId=\"domain-interface-color_code_second\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_second\"\n            class=\"form-control\"\n            formControlName=\"color_code_second\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_second'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeThird' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeThird' | transloco\"\n          name=\"color_code_third\" controlId=\"domain-interface-color_code_third\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_third\"\n            class=\"form-control\"\n            formControlName=\"color_code_third\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_third'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeTitles' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeTitles' | transloco\"\n          name=\"color_code_titles\" controlId=\"domain-interface-color_code_titles\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_titles\"\n            class=\"form-control\"\n            formControlName=\"color_code_titles\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_titles'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeText' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeText' | transloco\"\n          name=\"color_code_text\" controlId=\"domain-interface-color_code_text\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_text\"\n            class=\"form-control\"\n            formControlName=\"color_code_text\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_text'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeSidebarBg' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeSidebarBg' | transloco\"\n          name=\"color_code_sidebar_bg\" controlId=\"domain-interface-color_code_sidebar_bg\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_sidebar_bg\"\n            class=\"form-control\"\n            formControlName=\"color_code_sidebar_bg\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_sidebar_bg'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeSidebarText' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeSidebarText' | transloco\"\n          name=\"color_code_sidebar_text\" controlId=\"domain-interface-color_code_sidebar_text\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_sidebar_text\"\n            class=\"form-control\"\n            formControlName=\"color_code_sidebar_text\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_sidebar_text'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeDashboardBg' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeDashboardBg' | transloco\"\n          name=\"color_code_dashboard_bg\" controlId=\"domain-interface-color_code_dashboard_bg\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_dashboard_bg\"\n            class=\"form-control\"\n            formControlName=\"color_code_dashboard_bg\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_dashboard_bg'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeDashboardText' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeDashboardText' | transloco\"\n          name=\"color_code_dashboard_text\" controlId=\"domain-interface-color_code_dashboard_text\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_dashboard_text\"\n            class=\"form-control\"\n            formControlName=\"color_code_dashboard_text\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_dashboard_text'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeTabsBg' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeTabsBg' | transloco\"\n          name=\"color_code_tabs_bg\" controlId=\"domain-interface-color_code_tabs_bg\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_tabs_bg\"\n            class=\"form-control\"\n            formControlName=\"color_code_tabs_bg\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_tabs_bg'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeTabsText' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeTabsText' | transloco\"\n          name=\"color_code_tabs_text\" controlId=\"domain-interface-color_code_tabs_text\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_tabs_text\"\n            class=\"form-control\"\n            formControlName=\"color_code_tabs_text\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_tabs_text'].errors }\" />\n        </pw-input-container>\n      </div>\n    </div>\n    <h3>Logos</h3>\n    <div class=\"mb-3\">\n      <p>\n        These logos are required and used across the platform on various pages, including the header on public pages and the dashboard.\n      </p>\n    </div>\n    <div class=\"row gy-4\"\n      matchHeight=\"card\">\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_main-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoMain' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_main-label'\"\n          [aspectRatio]=\"'fullLogo'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Main'\"\n          [previewData]=\"data['logo_main']\"\n        controlName=\"logo_main\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_main_dark-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoMainDark' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_main_dark-label'\"\n          [aspectRatio]=\"'fullLogo'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Main Dark'\"\n          [previewData]=\"data['logo_main_dark']\"\n        controlName=\"logo_main_dark\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_main_contrast-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoMainContrast' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_main_contrast-label'\"\n          [aspectRatio]=\"'fullLogo'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Main Contrast'\"\n          [previewData]=\"data['logo_main_contrast']\"\n        controlName=\"logo_main_contrast\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_squared_main-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoSquaredMain' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_squared_main-label'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Squared Main'\"\n          [previewData]=\"data['logo_squared_main']\"\n        controlName=\"logo_squared_main\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_squared_dark-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoSquaredDark' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_squared_dark-label'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Squared Dark'\"\n          [previewData]=\"data['logo_squared_dark']\"\n        controlName=\"logo_squared_dark\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_squared_contrast-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoSquaredContrast' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_squared_contrast-label'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Squared Contrast'\"\n          [previewData]=\"data['logo_squared_contrast']\"\n        controlName=\"logo_squared_contrast\"></pw-custom-uploader>\n      </div>\n    </div>\n    <div class=\"col-12 text-end mt-5\">\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\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n}\n@if (!data?.host_name && !isLoading) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"></pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.default-color-code-section{gap:2em;justify-content:space-between;align-items:center;display:flex;flex-wrap:wrap;margin-bottom:1rem}.theme-presets{display:flex;flex-wrap:wrap;gap:.5rem}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i13$1.CustomUploaderComponent, selector: "pw-custom-uploader", inputs: ["controlName", "previewData", "aspectRatio", "title"], outputs: ["saveEvent"] }, { kind: "component", type: i3$2.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i7.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -2056,7 +2074,7 @@ __decorate([
 ], DomainConfigInterfaceComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DomainConfigInterfaceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-domain-config-interface', standalone: false, template: "@if (isLoading) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n@if (data?.host_name) {\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <h3>Colors</h3>\n    <div class=\"default-color-code-section mb-4\">\n      <p class=\"mb-0\">Pick a preset theme to apply a full colour scheme, then fine-tune any colour below.</p>\n      <div class=\"theme-presets\">\n        @for (theme of colorThemes; track theme.label) {\n          <a class=\"btn btn-sm btn-outline-primary build-action-button\"\n            [attr.data-cy]=\"'theme-preset-' + theme.label\"\n            (click)=\"applyColorTheme(theme)\">\n            {{ theme.name || (('Admin.DomainConfig.Theme' | transloco) + ' ' + theme.label) }}\n          </a>\n        }\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeFirst' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeFirst' | transloco\"\n          name=\"color_code_first\" controlId=\"domain-interface-color_code_first\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_first\"\n            class=\"form-control\"\n            formControlName=\"color_code_first\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_first'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeSecond' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeSecond' | transloco\"\n          name=\"color_code_second\" controlId=\"domain-interface-color_code_second\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_second\"\n            class=\"form-control\"\n            formControlName=\"color_code_second\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_second'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeThird' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeThird' | transloco\"\n          name=\"color_code_third\" controlId=\"domain-interface-color_code_third\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_third\"\n            class=\"form-control\"\n            formControlName=\"color_code_third\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_third'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeTitles' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeTitles' | transloco\"\n          name=\"color_code_titles\" controlId=\"domain-interface-color_code_titles\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_titles\"\n            class=\"form-control\"\n            formControlName=\"color_code_titles\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_titles'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeText' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeText' | transloco\"\n          name=\"color_code_text\" controlId=\"domain-interface-color_code_text\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_text\"\n            class=\"form-control\"\n            formControlName=\"color_code_text\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_text'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeSidebarBg' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeSidebarBg' | transloco\"\n          name=\"color_code_sidebar_bg\" controlId=\"domain-interface-color_code_sidebar_bg\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_sidebar_bg\"\n            class=\"form-control\"\n            formControlName=\"color_code_sidebar_bg\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_sidebar_bg'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeSidebarText' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeSidebarText' | transloco\"\n          name=\"color_code_sidebar_text\" controlId=\"domain-interface-color_code_sidebar_text\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_sidebar_text\"\n            class=\"form-control\"\n            formControlName=\"color_code_sidebar_text\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_sidebar_text'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeTabsBg' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeTabsBg' | transloco\"\n          name=\"color_code_tabs_bg\" controlId=\"domain-interface-color_code_tabs_bg\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_tabs_bg\"\n            class=\"form-control\"\n            formControlName=\"color_code_tabs_bg\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_tabs_bg'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeTabsText' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeTabsText' | transloco\"\n          name=\"color_code_tabs_text\" controlId=\"domain-interface-color_code_tabs_text\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_tabs_text\"\n            class=\"form-control\"\n            formControlName=\"color_code_tabs_text\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_tabs_text'].errors }\" />\n        </pw-input-container>\n      </div>\n    </div>\n    <h3>Logos</h3>\n    <div class=\"mb-3\">\n      <p>\n        These logos are required and used across the platform on various pages, including the header on public pages and the dashboard.\n      </p>\n    </div>\n    <div class=\"row gy-4\"\n      matchHeight=\"card\">\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_main-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoMain' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_main-label'\"\n          [aspectRatio]=\"'fullLogo'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Main'\"\n          [previewData]=\"data['logo_main']\"\n        controlName=\"logo_main\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_main_dark-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoMainDark' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_main_dark-label'\"\n          [aspectRatio]=\"'fullLogo'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Main Dark'\"\n          [previewData]=\"data['logo_main_dark']\"\n        controlName=\"logo_main_dark\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_main_contrast-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoMainContrast' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_main_contrast-label'\"\n          [aspectRatio]=\"'fullLogo'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Main Contrast'\"\n          [previewData]=\"data['logo_main_contrast']\"\n        controlName=\"logo_main_contrast\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_squared_main-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoSquaredMain' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_squared_main-label'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Squared Main'\"\n          [previewData]=\"data['logo_squared_main']\"\n        controlName=\"logo_squared_main\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_squared_dark-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoSquaredDark' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_squared_dark-label'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Squared Dark'\"\n          [previewData]=\"data['logo_squared_dark']\"\n        controlName=\"logo_squared_dark\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_squared_contrast-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoSquaredContrast' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_squared_contrast-label'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Squared Contrast'\"\n          [previewData]=\"data['logo_squared_contrast']\"\n        controlName=\"logo_squared_contrast\"></pw-custom-uploader>\n      </div>\n    </div>\n    <div class=\"col-12 text-end mt-5\">\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\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n}\n@if (!data?.host_name && !isLoading) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"></pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.default-color-code-section{gap:2em;justify-content:space-between;align-items:center;display:flex;flex-wrap:wrap;margin-bottom:1rem}.theme-presets{display:flex;flex-wrap:wrap;gap:.5rem}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"] }]
+            args: [{ selector: 'pw-domain-config-interface', standalone: false, template: "@if (isLoading) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n@if (data?.host_name) {\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <h3>Colors</h3>\n    <div class=\"default-color-code-section mb-4\">\n      <p class=\"mb-0\">Pick a preset theme to apply a full colour scheme, then fine-tune any colour below.</p>\n      <div class=\"theme-presets\">\n        @for (theme of colorThemes; track theme.label) {\n          <a class=\"btn btn-sm btn-outline-primary build-action-button\"\n            [attr.data-cy]=\"'theme-preset-' + theme.label\"\n            (click)=\"applyColorTheme(theme)\">\n            {{ theme.name || (('Admin.DomainConfig.Theme' | transloco) + ' ' + theme.label) }}\n          </a>\n        }\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeFirst' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeFirst' | transloco\"\n          name=\"color_code_first\" controlId=\"domain-interface-color_code_first\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_first\"\n            class=\"form-control\"\n            formControlName=\"color_code_first\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_first'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeSecond' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeSecond' | transloco\"\n          name=\"color_code_second\" controlId=\"domain-interface-color_code_second\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_second\"\n            class=\"form-control\"\n            formControlName=\"color_code_second\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_second'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeThird' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeThird' | transloco\"\n          name=\"color_code_third\" controlId=\"domain-interface-color_code_third\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_third\"\n            class=\"form-control\"\n            formControlName=\"color_code_third\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_third'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeTitles' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeTitles' | transloco\"\n          name=\"color_code_titles\" controlId=\"domain-interface-color_code_titles\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_titles\"\n            class=\"form-control\"\n            formControlName=\"color_code_titles\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_titles'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeText' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeText' | transloco\"\n          name=\"color_code_text\" controlId=\"domain-interface-color_code_text\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_text\"\n            class=\"form-control\"\n            formControlName=\"color_code_text\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_text'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeSidebarBg' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeSidebarBg' | transloco\"\n          name=\"color_code_sidebar_bg\" controlId=\"domain-interface-color_code_sidebar_bg\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_sidebar_bg\"\n            class=\"form-control\"\n            formControlName=\"color_code_sidebar_bg\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_sidebar_bg'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeSidebarText' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeSidebarText' | transloco\"\n          name=\"color_code_sidebar_text\" controlId=\"domain-interface-color_code_sidebar_text\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_sidebar_text\"\n            class=\"form-control\"\n            formControlName=\"color_code_sidebar_text\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_sidebar_text'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeDashboardBg' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeDashboardBg' | transloco\"\n          name=\"color_code_dashboard_bg\" controlId=\"domain-interface-color_code_dashboard_bg\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_dashboard_bg\"\n            class=\"form-control\"\n            formControlName=\"color_code_dashboard_bg\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_dashboard_bg'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeDashboardText' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeDashboardText' | transloco\"\n          name=\"color_code_dashboard_text\" controlId=\"domain-interface-color_code_dashboard_text\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_dashboard_text\"\n            class=\"form-control\"\n            formControlName=\"color_code_dashboard_text\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_dashboard_text'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\"></div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeTabsBg' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeTabsBg' | transloco\"\n          name=\"color_code_tabs_bg\" controlId=\"domain-interface-color_code_tabs_bg\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_tabs_bg\"\n            class=\"form-control\"\n            formControlName=\"color_code_tabs_bg\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_tabs_bg'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.ColorCodeTabsText' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.ColorCodeTabsText' | transloco\"\n          name=\"color_code_tabs_text\" controlId=\"domain-interface-color_code_tabs_text\">\n          <input type=\"color\"\n            id=\"domain-interface-color_code_tabs_text\"\n            class=\"form-control\"\n            formControlName=\"color_code_tabs_text\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['color_code_tabs_text'].errors }\" />\n        </pw-input-container>\n      </div>\n    </div>\n    <h3>Logos</h3>\n    <div class=\"mb-3\">\n      <p>\n        These logos are required and used across the platform on various pages, including the header on public pages and the dashboard.\n      </p>\n    </div>\n    <div class=\"row gy-4\"\n      matchHeight=\"card\">\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_main-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoMain' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_main-label'\"\n          [aspectRatio]=\"'fullLogo'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Main'\"\n          [previewData]=\"data['logo_main']\"\n        controlName=\"logo_main\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_main_dark-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoMainDark' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_main_dark-label'\"\n          [aspectRatio]=\"'fullLogo'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Main Dark'\"\n          [previewData]=\"data['logo_main_dark']\"\n        controlName=\"logo_main_dark\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_main_contrast-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoMainContrast' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_main_contrast-label'\"\n          [aspectRatio]=\"'fullLogo'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Main Contrast'\"\n          [previewData]=\"data['logo_main_contrast']\"\n        controlName=\"logo_main_contrast\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_squared_main-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoSquaredMain' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_squared_main-label'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Squared Main'\"\n          [previewData]=\"data['logo_squared_main']\"\n        controlName=\"logo_squared_main\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_squared_dark-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoSquaredDark' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_squared_dark-label'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Squared Dark'\"\n          [previewData]=\"data['logo_squared_dark']\"\n        controlName=\"logo_squared_dark\"></pw-custom-uploader>\n      </div>\n      <div class=\"col-md-4 mt-3\">\n        <span id=\"domain-interface-logo_squared_contrast-label\" class=\"pw-label-style\">{{ 'Admin.DomainConfig.LogoSquaredContrast' | transloco }}</span>\n        <pw-custom-uploader\n          [attr.aria-labelledby]=\"'domain-interface-logo_squared_contrast-label'\"\n          (saveEvent)=\"saveFile($event)\"\n          [title]=\"'Logo Squared Contrast'\"\n          [previewData]=\"data['logo_squared_contrast']\"\n        controlName=\"logo_squared_contrast\"></pw-custom-uploader>\n      </div>\n    </div>\n    <div class=\"col-12 text-end mt-5\">\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\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n}\n@if (!data?.host_name && !isLoading) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"></pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.default-color-code-section{gap:2em;justify-content:space-between;align-items:center;display:flex;flex-wrap:wrap;margin-bottom:1rem}.theme-presets{display:flex;flex-wrap:wrap;gap:.5rem}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }, { type: i0.ChangeDetectorRef }], propDecorators: { uploader: [{
                 type: ViewChildren,
                 args: [CustomUploaderComponent]
@@ -2159,6 +2177,7 @@ const DOMAIN_COMPLETION_SECTIONS = [
             field('color_code_titles'),
             field('color_code_text'),
             field('color_code_sidebar_bg'),
+            field('color_code_dashboard_bg'),
             field('color_code_tabs_bg')
         ]
     },
@@ -2482,11 +2501,11 @@ class AddEditFaqComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddEditFaqComponent, deps: [{ token: i1$1.CommonService }, { token: i1.AdminService }, { token: i1$1.ProductService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AddEditFaqComponent, isStandalone: false, selector: "pw-admin-add-edit-faq", 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 aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i\n            class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"mt-3\">{{ (isEdit ? 'Admin.Faq.EditTitle' : 'Admin.Faq.AddTitle') | transloco }}</h3>\n      </div>\n      @if (isLoading) {\n        <div class=\"w-100 text-center mt-3\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      @if (!isLoading) {\n        <div class=\"p-2 mt-3\">\n          <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n            <h3>{{ 'Admin.Faq.Section.Content' | transloco }}</h3>\n            <div class=\"row\">\n              <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\" controlId=\"faq-question\"\n                [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                <input type=\"text\" id=\"faq-question\" formControlName=\"question\" class=\"form-control\"\n                  [placeholder]=\"'Admin.Faq.Placeholder.Question' | transloco\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n              </pw-input-container>\n              <pw-input-container class=\"col-12 quill-editor\"\n                [label]=\"'Admin.Faq.Answer' | transloco\"\n                name=\"answer\" controlId=\"faq-answer\" [useAriaLabelledbyOnly]=\"true\"\n                [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                <quill-editor [attr.aria-labelledby]=\"'faq-answer-label'\" [styles]=\"{ height: '200px'}\" formControlName=\"answer\"\n                  [placeholder]=\"'Admin.Faq.Placeholder.Answer' | transloco\"\n                  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\n            <h3>{{ 'Admin.Faq.Section.Targeting' | transloco }}</h3>\n            <div class=\"row\">\n              <div class=\"col-12 col-md-4\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                  [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\" controlId=\"faq-category\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <p-select [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                    [attr.aria-labelledby]=\"'faq-category-label'\"\n                    [placeholder]=\"'Admin.Faq.Placeholder.Category' | transloco\"\n                    formControlName=\"category\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n              <div class=\"col-12 col-md-4\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                  [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\" controlId=\"faq-product_id\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <p-select [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                    [attr.aria-labelledby]=\"'faq-product_id-label'\"\n                    [placeholder]=\"'Admin.Faq.Placeholder.Product' | transloco\"\n                    [showClear]=\"true\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n              <!-- Features keys-->\n              <div class=\"col-12 col-md-4\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                  [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\" controlId=\"faq-feature_keys\" [useAriaLabelledbyOnly]=\"true\">\n                  <p-multiSelect inputId=\"faq-feature_keys\" [options]=\"featureKeysList\" [attr.aria-labelledby]=\"'faq-feature_keys-label'\"\n                    [placeholder]=\"'Admin.Faq.Placeholder.Features' | transloco\" [showHeader]=\"true\"\n                    [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\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\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                    [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\" controlId=\"faq-position\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <div class=\"position\">\n                      <input type=\"number\" id=\"faq-position\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                    </div>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n\n            <h3>{{ 'Admin.Faq.Section.Visibility' | transloco }}</h3>\n            <div class=\"row\">\n              <div class=\"col-6 col-md-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Visible' | transloco\"\n                  [label]=\"'Admin.Faq.Visible' | transloco\"\n                  name=\"visible\" controlId=\"faq-visible\" [useAriaLabelledbyOnly]=\"true\">\n                  <ui-switch formControlName=\"visible\" [attr.aria-labelledby]=\"'faq-visible-label'\"></ui-switch>\n                </pw-input-container>\n              </div>\n              <div class=\"col-6 col-md-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Public' | transloco\"\n                  [label]=\"'Admin.Faq.Public' | transloco\"\n                  name=\"public\" controlId=\"faq-public\" [useAriaLabelledbyOnly]=\"true\">\n                  <ui-switch formControlName=\"public\" [attr.aria-labelledby]=\"'faq-public-label'\"></ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <ng-container *rbacAllow=\"'SuperAdmin'\">\n              <h3>{{ 'Admin.Faq.Section.PlatformScope' | transloco }}</h3>\n              <div class=\"row\">\n                <div class=\"col-6 col-md-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\"\n                    [label]=\"'Admin.Faq.SharedFaq' | transloco\" labelClass=\"text-warning\"\n                    name=\"is_shared_faq\" controlId=\"faq-is_shared_faq\" [useAriaLabelledbyOnly]=\"true\">\n                    <ui-switch formControlName=\"is_shared_faq\" name=\"is_shared_faq\" [attr.aria-labelledby]=\"'faq-is_shared_faq-label'\"></ui-switch>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-6 col-md-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\"\n                    [label]=\"'Admin.Faq.AdminFaq' | transloco\" labelClass=\"text-warning\"\n                    name=\"is_admin_faq\" controlId=\"faq-is_admin_faq\" [useAriaLabelledbyOnly]=\"true\">\n                    <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\" [attr.aria-labelledby]=\"'faq-is_admin_faq-label'\"></ui-switch>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-6 col-md-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\"\n                    [label]=\"'Admin.Faq.BuildFaq' | transloco\" labelClass=\"text-warning\"\n                    name=\"is_build_faq\" controlId=\"faq-is_build_faq\" [useAriaLabelledbyOnly]=\"true\">\n                    <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\" [attr.aria-labelledby]=\"'faq-is_build_faq-label'\"></ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </ng-container>\n\n            <div class=\"row\">\n              <div class=\"col-12 mt-4\">\n                <div class=\"mb-3 text-end\">\n                  <button type=\"button\" class=\"btn btn-outline-default me-2\" (keydown.enter)=\"onCancel()\" (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        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.tooltip-info-circle:after{left:.5rem!important}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"], dependencies: [{ kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i10.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i7.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AddEditFaqComponent, isStandalone: false, selector: "pw-admin-add-edit-faq", 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 aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i\n            class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"mt-3\">{{ (isEdit ? 'Admin.Faq.EditTitle' : 'Admin.Faq.AddTitle') | transloco }}</h3>\n      </div>\n      @if (isLoading) {\n        <div class=\"w-100 text-center mt-3\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      @if (!isLoading) {\n        <div class=\"p-2 mt-3\">\n          <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n            <h3>{{ 'Admin.Faq.Section.Content' | transloco }}</h3>\n            <div class=\"row\">\n              <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\" controlId=\"faq-question\"\n                [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                <input type=\"text\" id=\"faq-question\" formControlName=\"question\" class=\"form-control\"\n                  [placeholder]=\"'Admin.Faq.Placeholder.Question' | transloco\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n              </pw-input-container>\n              <pw-input-container class=\"col-12 quill-editor\"\n                [label]=\"'Admin.Faq.Answer' | transloco\"\n                name=\"answer\" controlId=\"faq-answer\" [useAriaLabelledbyOnly]=\"true\"\n                [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                <quill-editor [attr.aria-labelledby]=\"'faq-answer-label'\" [styles]=\"{ height: '200px'}\" formControlName=\"answer\"\n                  [placeholder]=\"'Admin.Faq.Placeholder.Answer' | transloco\"\n                  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\n            <h3>{{ 'Admin.Faq.Section.Targeting' | transloco }}</h3>\n            <div class=\"row\">\n              <div class=\"col-12 col-md-4\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                  [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\" controlId=\"faq-category\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <p-select [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                    [attr.aria-labelledby]=\"'faq-category-label'\"\n                    [placeholder]=\"'Admin.Faq.Placeholder.Category' | transloco\"\n                    formControlName=\"category\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n              <div class=\"col-12 col-md-4\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                  [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\" controlId=\"faq-product_id\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <p-select [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                    [attr.aria-labelledby]=\"'faq-product_id-label'\"\n                    [placeholder]=\"'Admin.Faq.Placeholder.Product' | transloco\"\n                    [showClear]=\"true\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n              <!-- Features keys-->\n              <div class=\"col-12 col-md-4\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                  [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\" controlId=\"faq-feature_keys\" [useAriaLabelledbyOnly]=\"true\">\n                  <p-multiSelect inputId=\"faq-feature_keys\" [options]=\"featureKeysList\" [attr.aria-labelledby]=\"'faq-feature_keys-label'\"\n                    [placeholder]=\"'Admin.Faq.Placeholder.Features' | transloco\" [showHeader]=\"true\"\n                    [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\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\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                    [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\" controlId=\"faq-position\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <div class=\"position\">\n                      <input type=\"number\" id=\"faq-position\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                    </div>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n\n            <h3>{{ 'Admin.Faq.Section.Visibility' | transloco }}</h3>\n            <div class=\"row\">\n              <div class=\"col-6 col-md-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Visible' | transloco\"\n                  [label]=\"'Admin.Faq.Visible' | transloco\"\n                  name=\"visible\" controlId=\"faq-visible\" [useAriaLabelledbyOnly]=\"true\">\n                  <ui-switch formControlName=\"visible\" [attr.aria-labelledby]=\"'faq-visible-label'\"></ui-switch>\n                </pw-input-container>\n              </div>\n              <div class=\"col-6 col-md-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Public' | transloco\"\n                  [label]=\"'Admin.Faq.Public' | transloco\"\n                  name=\"public\" controlId=\"faq-public\" [useAriaLabelledbyOnly]=\"true\">\n                  <ui-switch formControlName=\"public\" [attr.aria-labelledby]=\"'faq-public-label'\"></ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <ng-container *rbacAllow=\"'SuperAdmin'\">\n              <h3>{{ 'Admin.Faq.Section.PlatformScope' | transloco }}</h3>\n              <div class=\"row\">\n                <div class=\"col-6 col-md-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\"\n                    [label]=\"'Admin.Faq.SharedFaq' | transloco\" labelClass=\"text-warning\"\n                    name=\"is_shared_faq\" controlId=\"faq-is_shared_faq\" [useAriaLabelledbyOnly]=\"true\">\n                    <ui-switch formControlName=\"is_shared_faq\" name=\"is_shared_faq\" [attr.aria-labelledby]=\"'faq-is_shared_faq-label'\"></ui-switch>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-6 col-md-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\"\n                    [label]=\"'Admin.Faq.AdminFaq' | transloco\" labelClass=\"text-warning\"\n                    name=\"is_admin_faq\" controlId=\"faq-is_admin_faq\" [useAriaLabelledbyOnly]=\"true\">\n                    <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\" [attr.aria-labelledby]=\"'faq-is_admin_faq-label'\"></ui-switch>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-6 col-md-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\"\n                    [label]=\"'Admin.Faq.BuildFaq' | transloco\" labelClass=\"text-warning\"\n                    name=\"is_build_faq\" controlId=\"faq-is_build_faq\" [useAriaLabelledbyOnly]=\"true\">\n                    <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\" [attr.aria-labelledby]=\"'faq-is_build_faq-label'\"></ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </ng-container>\n\n            <div class=\"row\">\n              <div class=\"col-12 mt-4\">\n                <div class=\"mb-3 text-end\">\n                  <button type=\"button\" class=\"btn btn-outline-default me-2\" (keydown.enter)=\"onCancel()\" (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        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.tooltip-info-circle:after{left:.5rem!important}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"], dependencies: [{ kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i10.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i7.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddEditFaqComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-add-edit-faq', standalone: false, 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 aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i\n            class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"mt-3\">{{ (isEdit ? 'Admin.Faq.EditTitle' : 'Admin.Faq.AddTitle') | transloco }}</h3>\n      </div>\n      @if (isLoading) {\n        <div class=\"w-100 text-center mt-3\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      @if (!isLoading) {\n        <div class=\"p-2 mt-3\">\n          <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n            <h3>{{ 'Admin.Faq.Section.Content' | transloco }}</h3>\n            <div class=\"row\">\n              <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\" controlId=\"faq-question\"\n                [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                <input type=\"text\" id=\"faq-question\" formControlName=\"question\" class=\"form-control\"\n                  [placeholder]=\"'Admin.Faq.Placeholder.Question' | transloco\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n              </pw-input-container>\n              <pw-input-container class=\"col-12 quill-editor\"\n                [label]=\"'Admin.Faq.Answer' | transloco\"\n                name=\"answer\" controlId=\"faq-answer\" [useAriaLabelledbyOnly]=\"true\"\n                [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                <quill-editor [attr.aria-labelledby]=\"'faq-answer-label'\" [styles]=\"{ height: '200px'}\" formControlName=\"answer\"\n                  [placeholder]=\"'Admin.Faq.Placeholder.Answer' | transloco\"\n                  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\n            <h3>{{ 'Admin.Faq.Section.Targeting' | transloco }}</h3>\n            <div class=\"row\">\n              <div class=\"col-12 col-md-4\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                  [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\" controlId=\"faq-category\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <p-select [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                    [attr.aria-labelledby]=\"'faq-category-label'\"\n                    [placeholder]=\"'Admin.Faq.Placeholder.Category' | transloco\"\n                    formControlName=\"category\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n              <div class=\"col-12 col-md-4\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                  [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\" controlId=\"faq-product_id\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <p-select [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                    [attr.aria-labelledby]=\"'faq-product_id-label'\"\n                    [placeholder]=\"'Admin.Faq.Placeholder.Product' | transloco\"\n                    [showClear]=\"true\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n              <!-- Features keys-->\n              <div class=\"col-12 col-md-4\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                  [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\" controlId=\"faq-feature_keys\" [useAriaLabelledbyOnly]=\"true\">\n                  <p-multiSelect inputId=\"faq-feature_keys\" [options]=\"featureKeysList\" [attr.aria-labelledby]=\"'faq-feature_keys-label'\"\n                    [placeholder]=\"'Admin.Faq.Placeholder.Features' | transloco\" [showHeader]=\"true\"\n                    [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\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\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                    [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\" controlId=\"faq-position\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <div class=\"position\">\n                      <input type=\"number\" id=\"faq-position\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                    </div>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n\n            <h3>{{ 'Admin.Faq.Section.Visibility' | transloco }}</h3>\n            <div class=\"row\">\n              <div class=\"col-6 col-md-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Visible' | transloco\"\n                  [label]=\"'Admin.Faq.Visible' | transloco\"\n                  name=\"visible\" controlId=\"faq-visible\" [useAriaLabelledbyOnly]=\"true\">\n                  <ui-switch formControlName=\"visible\" [attr.aria-labelledby]=\"'faq-visible-label'\"></ui-switch>\n                </pw-input-container>\n              </div>\n              <div class=\"col-6 col-md-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Public' | transloco\"\n                  [label]=\"'Admin.Faq.Public' | transloco\"\n                  name=\"public\" controlId=\"faq-public\" [useAriaLabelledbyOnly]=\"true\">\n                  <ui-switch formControlName=\"public\" [attr.aria-labelledby]=\"'faq-public-label'\"></ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <ng-container *rbacAllow=\"'SuperAdmin'\">\n              <h3>{{ 'Admin.Faq.Section.PlatformScope' | transloco }}</h3>\n              <div class=\"row\">\n                <div class=\"col-6 col-md-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\"\n                    [label]=\"'Admin.Faq.SharedFaq' | transloco\" labelClass=\"text-warning\"\n                    name=\"is_shared_faq\" controlId=\"faq-is_shared_faq\" [useAriaLabelledbyOnly]=\"true\">\n                    <ui-switch formControlName=\"is_shared_faq\" name=\"is_shared_faq\" [attr.aria-labelledby]=\"'faq-is_shared_faq-label'\"></ui-switch>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-6 col-md-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\"\n                    [label]=\"'Admin.Faq.AdminFaq' | transloco\" labelClass=\"text-warning\"\n                    name=\"is_admin_faq\" controlId=\"faq-is_admin_faq\" [useAriaLabelledbyOnly]=\"true\">\n                    <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\" [attr.aria-labelledby]=\"'faq-is_admin_faq-label'\"></ui-switch>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-6 col-md-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\"\n                    [label]=\"'Admin.Faq.BuildFaq' | transloco\" labelClass=\"text-warning\"\n                    name=\"is_build_faq\" controlId=\"faq-is_build_faq\" [useAriaLabelledbyOnly]=\"true\">\n                    <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\" [attr.aria-labelledby]=\"'faq-is_build_faq-label'\"></ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </ng-container>\n\n            <div class=\"row\">\n              <div class=\"col-12 mt-4\">\n                <div class=\"mb-3 text-end\">\n                  <button type=\"button\" class=\"btn btn-outline-default me-2\" (keydown.enter)=\"onCancel()\" (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        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.tooltip-info-circle:after{left:.5rem!important}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"] }]
+            args: [{ selector: 'pw-admin-add-edit-faq', standalone: false, 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 aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i\n            class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"mt-3\">{{ (isEdit ? 'Admin.Faq.EditTitle' : 'Admin.Faq.AddTitle') | transloco }}</h3>\n      </div>\n      @if (isLoading) {\n        <div class=\"w-100 text-center mt-3\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      @if (!isLoading) {\n        <div class=\"p-2 mt-3\">\n          <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n            <h3>{{ 'Admin.Faq.Section.Content' | transloco }}</h3>\n            <div class=\"row\">\n              <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\" controlId=\"faq-question\"\n                [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                <input type=\"text\" id=\"faq-question\" formControlName=\"question\" class=\"form-control\"\n                  [placeholder]=\"'Admin.Faq.Placeholder.Question' | transloco\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n              </pw-input-container>\n              <pw-input-container class=\"col-12 quill-editor\"\n                [label]=\"'Admin.Faq.Answer' | transloco\"\n                name=\"answer\" controlId=\"faq-answer\" [useAriaLabelledbyOnly]=\"true\"\n                [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                <quill-editor [attr.aria-labelledby]=\"'faq-answer-label'\" [styles]=\"{ height: '200px'}\" formControlName=\"answer\"\n                  [placeholder]=\"'Admin.Faq.Placeholder.Answer' | transloco\"\n                  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\n            <h3>{{ 'Admin.Faq.Section.Targeting' | transloco }}</h3>\n            <div class=\"row\">\n              <div class=\"col-12 col-md-4\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                  [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\" controlId=\"faq-category\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <p-select [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                    [attr.aria-labelledby]=\"'faq-category-label'\"\n                    [placeholder]=\"'Admin.Faq.Placeholder.Category' | transloco\"\n                    formControlName=\"category\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n              <div class=\"col-12 col-md-4\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                  [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\" controlId=\"faq-product_id\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <p-select [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                    [attr.aria-labelledby]=\"'faq-product_id-label'\"\n                    [placeholder]=\"'Admin.Faq.Placeholder.Product' | transloco\"\n                    [showClear]=\"true\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n              <!-- Features keys-->\n              <div class=\"col-12 col-md-4\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                  [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\" controlId=\"faq-feature_keys\" [useAriaLabelledbyOnly]=\"true\">\n                  <p-multiSelect inputId=\"faq-feature_keys\" [options]=\"featureKeysList\" [attr.aria-labelledby]=\"'faq-feature_keys-label'\"\n                    [placeholder]=\"'Admin.Faq.Placeholder.Features' | transloco\" [showHeader]=\"true\"\n                    [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\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\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                    [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\" controlId=\"faq-position\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <div class=\"position\">\n                      <input type=\"number\" id=\"faq-position\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                    </div>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n\n            <h3>{{ 'Admin.Faq.Section.Visibility' | transloco }}</h3>\n            <div class=\"row\">\n              <div class=\"col-6 col-md-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Visible' | transloco\"\n                  [label]=\"'Admin.Faq.Visible' | transloco\"\n                  name=\"visible\" controlId=\"faq-visible\" [useAriaLabelledbyOnly]=\"true\">\n                  <ui-switch formControlName=\"visible\" [attr.aria-labelledby]=\"'faq-visible-label'\"></ui-switch>\n                </pw-input-container>\n              </div>\n              <div class=\"col-6 col-md-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Public' | transloco\"\n                  [label]=\"'Admin.Faq.Public' | transloco\"\n                  name=\"public\" controlId=\"faq-public\" [useAriaLabelledbyOnly]=\"true\">\n                  <ui-switch formControlName=\"public\" [attr.aria-labelledby]=\"'faq-public-label'\"></ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <ng-container *rbacAllow=\"'SuperAdmin'\">\n              <h3>{{ 'Admin.Faq.Section.PlatformScope' | transloco }}</h3>\n              <div class=\"row\">\n                <div class=\"col-6 col-md-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\"\n                    [label]=\"'Admin.Faq.SharedFaq' | transloco\" labelClass=\"text-warning\"\n                    name=\"is_shared_faq\" controlId=\"faq-is_shared_faq\" [useAriaLabelledbyOnly]=\"true\">\n                    <ui-switch formControlName=\"is_shared_faq\" name=\"is_shared_faq\" [attr.aria-labelledby]=\"'faq-is_shared_faq-label'\"></ui-switch>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-6 col-md-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\"\n                    [label]=\"'Admin.Faq.AdminFaq' | transloco\" labelClass=\"text-warning\"\n                    name=\"is_admin_faq\" controlId=\"faq-is_admin_faq\" [useAriaLabelledbyOnly]=\"true\">\n                    <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\" [attr.aria-labelledby]=\"'faq-is_admin_faq-label'\"></ui-switch>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-6 col-md-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\"\n                    [label]=\"'Admin.Faq.BuildFaq' | transloco\" labelClass=\"text-warning\"\n                    name=\"is_build_faq\" controlId=\"faq-is_build_faq\" [useAriaLabelledbyOnly]=\"true\">\n                    <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\" [attr.aria-labelledby]=\"'faq-is_build_faq-label'\"></ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </ng-container>\n\n            <div class=\"row\">\n              <div class=\"col-12 mt-4\">\n                <div class=\"mb-3 text-end\">\n                  <button type=\"button\" class=\"btn btn-outline-default me-2\" (keydown.enter)=\"onCancel()\" (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        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.tooltip-info-circle:after{left:.5rem!important}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.CommonService }, { type: i1.AdminService }, { type: i1$1.ProductService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { editForm: [{
                 type: ViewChild,
                 args: ['editForm', { static: false }]
@@ -2739,11 +2758,11 @@ class FaqListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FaqListComponent, deps: [{ token: i1$1.CommonService }, { token: i1.AdminService }, { token: i1$1.ProductService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3$2.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FaqListComponent, isStandalone: false, 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  @if (showList) {\n    <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\"\n      >\n      <h2 class=\"card-title p-0 float-start\">Frequently Asked Questions</h2>\n      <a aria-label=\"Navigate to Target\" [routerLink]=\"[routers.faqDetails + 'add']\"\n        class=\"btn btn-sm btn-outline-primary float-end\" aria-expanded=\"false\"\n        (keydown.enter)=\"$event.preventDefault()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Label.AddNew' | transloco }} FAQ </a>\n      </div>\n    }\n    <div class=\"col-12 mb-3\">\n      <p>The <strong>FAQ</strong> module enables you to provide clear, self-serve answers to common users questions - reducing support load.<br>\n      It's ideal for covering things like <strong>pricing</strong>, <strong>troubleshooting</strong>, and <strong>onboarding steps</strong>.</p>\n    </div>\n  </div>\n\n  @if (!isLoaded) {\n    <div class=\"w-100 text-center mt-3\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n  }\n  <div class=\"row faqlist primeng-datatable-container actions-collapsed 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 styleClass=\"pw-filter-select\" inputId=\"faqs-list-feature-keys\" [showToggleAll]=\"true\" [options]=\"featureKeysList\" (onChange)=\"onProductChange($event)\"\n                placeholder=\"Filter by feature keys\" [showHeader]=\"true\" maxSelectedLabels=\"2\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"text-end\">\n              <p-iconfield iconPosition=\"left\">\n                <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n                <input type=\"text\"\n                  id=\"faqs-list-search\"\n                  name=\"faqs-list-search\"\n                  [(ngModel)]=\"searchText\"\n                  pInputText\n                  placeholder=\"Search FAQs...\"\n                  (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n              </p-iconfield>\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\" appendTo=\"body\">{{ faqHashMap[faq?.category]?.name\n                }}</span>\n              </span>\n              @if (faq.is_shared_faq || faq.is_admin_faq || faq.is_build_faq) {\n                <span class=\"ms-1 badge bg-warning\">Super\n                FAQ</span>\n              }\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-2\">\n                  <i class=\"fa fa-edit edit-icon\" (keydown.enter)=\"navigateToEdit(faq)\" (keydown.space)=\"navigateToEdit(faq)\" (click)=\"navigateToEdit(faq)\" aria-hidden=\"true\"></i>\n                </li>\n                <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-2\">\n                  <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(faq)\" (keydown.space)=\"onDelete(faq)\" (click)=\"onDelete(faq)\" aria-hidden=\"true\"></i>\n                </li>\n                @if (faq?.visible) {\n                  <li pTooltip=\"View faq\" tooltipPosition=\"top\" appendTo=\"body\">\n                    <a [routerLink]=\"['/',slug,'faq',faq.id]\" target=\"_blank\" aria-label=\"View FAQ\">\n                      <i class=\"fa fa-eye fa-lg\" aria-hidden=\"true\"></i>\n                    </a>\n                  </li>\n                }\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n          </pw-no-data>\n        </div>\n      }\n      @if (totalRecords !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n      }\n    </div>\n  </div>\n  @if (totalRecordsUnFiltered === 0 && isLoaded) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Faq.NoDataMessage' | transloco\">\n    </pw-no-data>\n  }\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.faq-item{background-color:#fff;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: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FaqListComponent, isStandalone: false, 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  @if (showList) {\n    <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\"\n      >\n      <h2 class=\"card-title p-0 float-start\">Frequently Asked Questions</h2>\n      <a aria-label=\"Navigate to Target\" [routerLink]=\"[routers.faqDetails + 'add']\"\n        class=\"btn btn-sm btn-outline-primary float-end\" aria-expanded=\"false\"\n        (keydown.enter)=\"$event.preventDefault()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Label.AddNew' | transloco }} FAQ </a>\n      </div>\n    }\n    <div class=\"col-12 mb-3\">\n      <p>The <strong>FAQ</strong> module enables you to provide clear, self-serve answers to common users questions - reducing support load.<br>\n      It's ideal for covering things like <strong>pricing</strong>, <strong>troubleshooting</strong>, and <strong>onboarding steps</strong>.</p>\n    </div>\n  </div>\n\n  @if (!isLoaded) {\n    <div class=\"w-100 text-center mt-3\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n  }\n  <div class=\"row faqlist primeng-datatable-container actions-collapsed 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 styleClass=\"pw-filter-select\" inputId=\"faqs-list-feature-keys\" [showToggleAll]=\"true\" [options]=\"featureKeysList\" (onChange)=\"onProductChange($event)\"\n                placeholder=\"Filter by feature keys\" [showHeader]=\"true\" maxSelectedLabels=\"2\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"text-end\">\n              <p-iconfield iconPosition=\"left\">\n                <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n                <input type=\"text\"\n                  id=\"faqs-list-search\"\n                  name=\"faqs-list-search\"\n                  [(ngModel)]=\"searchText\"\n                  pInputText\n                  placeholder=\"Search FAQs...\"\n                  (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n              </p-iconfield>\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\" appendTo=\"body\">{{ faqHashMap[faq?.category]?.name\n                }}</span>\n              </span>\n              @if (faq.is_shared_faq || faq.is_admin_faq || faq.is_build_faq) {\n                <span class=\"ms-1 badge bg-warning\">Super\n                FAQ</span>\n              }\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-2\">\n                  <i class=\"fa fa-edit edit-icon\" (keydown.enter)=\"navigateToEdit(faq)\" (keydown.space)=\"navigateToEdit(faq)\" (click)=\"navigateToEdit(faq)\" aria-hidden=\"true\"></i>\n                </li>\n                <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-2\">\n                  <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(faq)\" (keydown.space)=\"onDelete(faq)\" (click)=\"onDelete(faq)\" aria-hidden=\"true\"></i>\n                </li>\n                @if (faq?.visible) {\n                  <li pTooltip=\"View faq\" tooltipPosition=\"top\" appendTo=\"body\">\n                    <a [routerLink]=\"['/',slug,'faq',faq.id]\" target=\"_blank\" aria-label=\"View FAQ\">\n                      <i class=\"fa fa-eye fa-lg\" aria-hidden=\"true\"></i>\n                    </a>\n                  </li>\n                }\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n          </pw-no-data>\n        </div>\n      }\n      @if (totalRecords !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n      }\n    </div>\n  </div>\n  @if (totalRecordsUnFiltered === 0 && isLoaded) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Faq.NoDataMessage' | transloco\">\n    </pw-no-data>\n  }\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.faq-item{background-color:#fff;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: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FaqListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-faq-list', standalone: false, template: "<div class=\"row\" [class.custom-disable-wrapper]=\"buttonBusy\">\n  @if (showList) {\n    <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\"\n      >\n      <h2 class=\"card-title p-0 float-start\">Frequently Asked Questions</h2>\n      <a aria-label=\"Navigate to Target\" [routerLink]=\"[routers.faqDetails + 'add']\"\n        class=\"btn btn-sm btn-outline-primary float-end\" aria-expanded=\"false\"\n        (keydown.enter)=\"$event.preventDefault()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Label.AddNew' | transloco }} FAQ </a>\n      </div>\n    }\n    <div class=\"col-12 mb-3\">\n      <p>The <strong>FAQ</strong> module enables you to provide clear, self-serve answers to common users questions - reducing support load.<br>\n      It's ideal for covering things like <strong>pricing</strong>, <strong>troubleshooting</strong>, and <strong>onboarding steps</strong>.</p>\n    </div>\n  </div>\n\n  @if (!isLoaded) {\n    <div class=\"w-100 text-center mt-3\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n  }\n  <div class=\"row faqlist primeng-datatable-container actions-collapsed 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 styleClass=\"pw-filter-select\" inputId=\"faqs-list-feature-keys\" [showToggleAll]=\"true\" [options]=\"featureKeysList\" (onChange)=\"onProductChange($event)\"\n                placeholder=\"Filter by feature keys\" [showHeader]=\"true\" maxSelectedLabels=\"2\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"text-end\">\n              <p-iconfield iconPosition=\"left\">\n                <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n                <input type=\"text\"\n                  id=\"faqs-list-search\"\n                  name=\"faqs-list-search\"\n                  [(ngModel)]=\"searchText\"\n                  pInputText\n                  placeholder=\"Search FAQs...\"\n                  (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n              </p-iconfield>\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\" appendTo=\"body\">{{ faqHashMap[faq?.category]?.name\n                }}</span>\n              </span>\n              @if (faq.is_shared_faq || faq.is_admin_faq || faq.is_build_faq) {\n                <span class=\"ms-1 badge bg-warning\">Super\n                FAQ</span>\n              }\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-2\">\n                  <i class=\"fa fa-edit edit-icon\" (keydown.enter)=\"navigateToEdit(faq)\" (keydown.space)=\"navigateToEdit(faq)\" (click)=\"navigateToEdit(faq)\" aria-hidden=\"true\"></i>\n                </li>\n                <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-2\">\n                  <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(faq)\" (keydown.space)=\"onDelete(faq)\" (click)=\"onDelete(faq)\" aria-hidden=\"true\"></i>\n                </li>\n                @if (faq?.visible) {\n                  <li pTooltip=\"View faq\" tooltipPosition=\"top\" appendTo=\"body\">\n                    <a [routerLink]=\"['/',slug,'faq',faq.id]\" target=\"_blank\" aria-label=\"View FAQ\">\n                      <i class=\"fa fa-eye fa-lg\" aria-hidden=\"true\"></i>\n                    </a>\n                  </li>\n                }\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n          </pw-no-data>\n        </div>\n      }\n      @if (totalRecords !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n      }\n    </div>\n  </div>\n  @if (totalRecordsUnFiltered === 0 && isLoaded) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Faq.NoDataMessage' | transloco\">\n    </pw-no-data>\n  }\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.faq-item{background-color:#fff;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', standalone: false, template: "<div class=\"row\" [class.custom-disable-wrapper]=\"buttonBusy\">\n  @if (showList) {\n    <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\"\n      >\n      <h2 class=\"card-title p-0 float-start\">Frequently Asked Questions</h2>\n      <a aria-label=\"Navigate to Target\" [routerLink]=\"[routers.faqDetails + 'add']\"\n        class=\"btn btn-sm btn-outline-primary float-end\" aria-expanded=\"false\"\n        (keydown.enter)=\"$event.preventDefault()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Label.AddNew' | transloco }} FAQ </a>\n      </div>\n    }\n    <div class=\"col-12 mb-3\">\n      <p>The <strong>FAQ</strong> module enables you to provide clear, self-serve answers to common users questions - reducing support load.<br>\n      It's ideal for covering things like <strong>pricing</strong>, <strong>troubleshooting</strong>, and <strong>onboarding steps</strong>.</p>\n    </div>\n  </div>\n\n  @if (!isLoaded) {\n    <div class=\"w-100 text-center mt-3\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n  }\n  <div class=\"row faqlist primeng-datatable-container actions-collapsed 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 styleClass=\"pw-filter-select\" inputId=\"faqs-list-feature-keys\" [showToggleAll]=\"true\" [options]=\"featureKeysList\" (onChange)=\"onProductChange($event)\"\n                placeholder=\"Filter by feature keys\" [showHeader]=\"true\" maxSelectedLabels=\"2\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"text-end\">\n              <p-iconfield iconPosition=\"left\">\n                <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n                <input type=\"text\"\n                  id=\"faqs-list-search\"\n                  name=\"faqs-list-search\"\n                  [(ngModel)]=\"searchText\"\n                  pInputText\n                  placeholder=\"Search FAQs...\"\n                  (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n              </p-iconfield>\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\" appendTo=\"body\">{{ faqHashMap[faq?.category]?.name\n                }}</span>\n              </span>\n              @if (faq.is_shared_faq || faq.is_admin_faq || faq.is_build_faq) {\n                <span class=\"ms-1 badge bg-warning\">Super\n                FAQ</span>\n              }\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-2\">\n                  <i class=\"fa fa-edit edit-icon\" (keydown.enter)=\"navigateToEdit(faq)\" (keydown.space)=\"navigateToEdit(faq)\" (click)=\"navigateToEdit(faq)\" aria-hidden=\"true\"></i>\n                </li>\n                <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-2\">\n                  <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(faq)\" (keydown.space)=\"onDelete(faq)\" (click)=\"onDelete(faq)\" aria-hidden=\"true\"></i>\n                </li>\n                @if (faq?.visible) {\n                  <li pTooltip=\"View faq\" tooltipPosition=\"top\" appendTo=\"body\">\n                    <a [routerLink]=\"['/',slug,'faq',faq.id]\" target=\"_blank\" aria-label=\"View FAQ\">\n                      <i class=\"fa fa-eye fa-lg\" aria-hidden=\"true\"></i>\n                    </a>\n                  </li>\n                }\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n          </pw-no-data>\n        </div>\n      }\n      @if (totalRecords !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n      }\n    </div>\n  </div>\n  @if (totalRecordsUnFiltered === 0 && isLoaded) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Faq.NoDataMessage' | transloco\">\n    </pw-no-data>\n  }\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.faq-item{background-color:#fff;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 }, { type: i0.ChangeDetectorRef }, { type: i3$2.ConfirmDialogService }], propDecorators: { editForm: [{
                 type: ViewChild,
                 args: ['editForm', { static: false }]
@@ -3613,11 +3632,11 @@ class AddEditIncidentComponent extends AppBaseComponent {
         this.router.navigate([`${this.routers.incidentConfig}`]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddEditIncidentComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$1.CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AddEditIncidentComponent, isStandalone: false, 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 aria-label=\"Navigate to Target\" 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      @if (isLoading) {\n        <div class=\"w-100 text-center mt-3\"\n          >\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      <div class=\"p-2 mt-3\">\n        @if (!isLoading) {\n          <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n            <div class=\"row\">\n              <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.UrlImpacted' | transloco\"\n                name=\"url_impacted\" controlId=\"incident-url_impacted\" [errorMsg]=\"'Admin.Incident.Validation.UrlImpacted' | transloco\">\n                <input type=\"text\" id=\"incident-url_impacted\" formControlName=\"url_impacted\" class=\"form-control\"\n                  [placeholder]=\"'Admin.Incident.Placeholder.UrlImpacted' | transloco\"\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\" controlId=\"incident-service_impacted\"\n                [errorMsg]=\"'Admin.Incident.Validation.ServiceImpacted' | transloco\">\n                <input type=\"text\" id=\"incident-service_impacted\" formControlName=\"service_impacted\" class=\"form-control\"\n                  [placeholder]=\"'Admin.Incident.Placeholder.ServiceImpacted' | transloco\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['service_impacted'].errors }\" />\n              </pw-input-container>\n              <div class=\"col-lg-12\" id=\"descriptionEditor\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Incident.Description' | transloco\" name=\"description\" controlId=\"incident-description\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Incident.Validation.Description' | transloco\">\n                  <quill-editor [attr.aria-labelledby]=\"'incident-description-label'\" [styles]=\"{ height: '200px'}\" formControlName=\"description\" [modules]=\"editorConfig\"\n                    [placeholder]=\"'Admin.Incident.Placeholder.Description' | transloco\"\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=\"col-lg-12\" id=\"internalDescriptionEditor\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Incident.InternalDescription' | transloco\" name=\"internal_description\" controlId=\"incident-internal_description\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Incident.Validation.InternalDescription' | transloco\">\n                  <quill-editor [attr.aria-labelledby]=\"'incident-internal_description-label'\" [styles]=\"{ height: '200px'}\" formControlName=\"internal_description\" [modules]=\"editorConfig\"\n                    [placeholder]=\"'Admin.Incident.Placeholder.InternalDescription' | transloco\"\n                    class=\"quillEditor d-block\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['internal_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\" controlId=\"incident-started_at\" [useAriaLabelledbyOnly]=\"true\"\n                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                    <p-datepicker inputId=\"incident-started_at\" class=\"addEditincident\" [attr.aria-labelledby]=\"'incident-started_at-label'\" formControlName=\"started_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                      [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                    </p-datepicker>\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\" controlId=\"incident-resolved_at\" [useAriaLabelledbyOnly]=\"true\"\n                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                    <p-datepicker inputId=\"incident-resolved_at\" class=\"addEditincident\" [attr.aria-labelledby]=\"'incident-resolved_at-label'\" formControlName=\"resolved_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                      [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                    </p-datepicker>\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\" controlId=\"incident-last_check_at\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                    <p-datepicker inputId=\"incident-last_check_at\" class=\"addEditincident\" [attr.aria-labelledby]=\"'incident-last_check_at-label'\" formControlName=\"last_check_at\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                      [showIcon]=\"true\" [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                    </p-datepicker>\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                    (keydown.enter)=\"onCancel()\" (click)=\"onCancel()\"  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        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i5$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i7.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AddEditIncidentComponent, isStandalone: false, 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 aria-label=\"Navigate to Target\" 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      @if (isLoading) {\n        <div class=\"w-100 text-center mt-3\"\n          >\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      <div class=\"p-2 mt-3\">\n        @if (!isLoading) {\n          <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n            <div class=\"row\">\n              <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.UrlImpacted' | transloco\"\n                name=\"url_impacted\" controlId=\"incident-url_impacted\" [errorMsg]=\"'Admin.Incident.Validation.UrlImpacted' | transloco\">\n                <input type=\"text\" id=\"incident-url_impacted\" formControlName=\"url_impacted\" class=\"form-control\"\n                  [placeholder]=\"'Admin.Incident.Placeholder.UrlImpacted' | transloco\"\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\" controlId=\"incident-service_impacted\"\n                [errorMsg]=\"'Admin.Incident.Validation.ServiceImpacted' | transloco\">\n                <input type=\"text\" id=\"incident-service_impacted\" formControlName=\"service_impacted\" class=\"form-control\"\n                  [placeholder]=\"'Admin.Incident.Placeholder.ServiceImpacted' | transloco\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['service_impacted'].errors }\" />\n              </pw-input-container>\n              <div class=\"col-lg-12\" id=\"descriptionEditor\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Incident.Description' | transloco\" name=\"description\" controlId=\"incident-description\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Incident.Validation.Description' | transloco\">\n                  <quill-editor [attr.aria-labelledby]=\"'incident-description-label'\" [styles]=\"{ height: '200px'}\" formControlName=\"description\" [modules]=\"editorConfig\"\n                    [placeholder]=\"'Admin.Incident.Placeholder.Description' | transloco\"\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=\"col-lg-12\" id=\"internalDescriptionEditor\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Incident.InternalDescription' | transloco\" name=\"internal_description\" controlId=\"incident-internal_description\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Incident.Validation.InternalDescription' | transloco\">\n                  <quill-editor [attr.aria-labelledby]=\"'incident-internal_description-label'\" [styles]=\"{ height: '200px'}\" formControlName=\"internal_description\" [modules]=\"editorConfig\"\n                    [placeholder]=\"'Admin.Incident.Placeholder.InternalDescription' | transloco\"\n                    class=\"quillEditor d-block\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['internal_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\" controlId=\"incident-started_at\" [useAriaLabelledbyOnly]=\"true\"\n                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                    <p-datepicker inputId=\"incident-started_at\" class=\"addEditincident\" [attr.aria-labelledby]=\"'incident-started_at-label'\" formControlName=\"started_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                      [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                    </p-datepicker>\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\" controlId=\"incident-resolved_at\" [useAriaLabelledbyOnly]=\"true\"\n                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                    <p-datepicker inputId=\"incident-resolved_at\" class=\"addEditincident\" [attr.aria-labelledby]=\"'incident-resolved_at-label'\" formControlName=\"resolved_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                      [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                    </p-datepicker>\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\" controlId=\"incident-last_check_at\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                    <p-datepicker inputId=\"incident-last_check_at\" class=\"addEditincident\" [attr.aria-labelledby]=\"'incident-last_check_at-label'\" formControlName=\"last_check_at\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                      [showIcon]=\"true\" [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                    </p-datepicker>\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                    (keydown.enter)=\"onCancel()\" (click)=\"onCancel()\"  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        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i5$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i7.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddEditIncidentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-add-edit-incident', standalone: false, 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 aria-label=\"Navigate to Target\" 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      @if (isLoading) {\n        <div class=\"w-100 text-center mt-3\"\n          >\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      <div class=\"p-2 mt-3\">\n        @if (!isLoading) {\n          <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n            <div class=\"row\">\n              <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.UrlImpacted' | transloco\"\n                name=\"url_impacted\" controlId=\"incident-url_impacted\" [errorMsg]=\"'Admin.Incident.Validation.UrlImpacted' | transloco\">\n                <input type=\"text\" id=\"incident-url_impacted\" formControlName=\"url_impacted\" class=\"form-control\"\n                  [placeholder]=\"'Admin.Incident.Placeholder.UrlImpacted' | transloco\"\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\" controlId=\"incident-service_impacted\"\n                [errorMsg]=\"'Admin.Incident.Validation.ServiceImpacted' | transloco\">\n                <input type=\"text\" id=\"incident-service_impacted\" formControlName=\"service_impacted\" class=\"form-control\"\n                  [placeholder]=\"'Admin.Incident.Placeholder.ServiceImpacted' | transloco\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['service_impacted'].errors }\" />\n              </pw-input-container>\n              <div class=\"col-lg-12\" id=\"descriptionEditor\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Incident.Description' | transloco\" name=\"description\" controlId=\"incident-description\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Incident.Validation.Description' | transloco\">\n                  <quill-editor [attr.aria-labelledby]=\"'incident-description-label'\" [styles]=\"{ height: '200px'}\" formControlName=\"description\" [modules]=\"editorConfig\"\n                    [placeholder]=\"'Admin.Incident.Placeholder.Description' | transloco\"\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=\"col-lg-12\" id=\"internalDescriptionEditor\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Incident.InternalDescription' | transloco\" name=\"internal_description\" controlId=\"incident-internal_description\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Incident.Validation.InternalDescription' | transloco\">\n                  <quill-editor [attr.aria-labelledby]=\"'incident-internal_description-label'\" [styles]=\"{ height: '200px'}\" formControlName=\"internal_description\" [modules]=\"editorConfig\"\n                    [placeholder]=\"'Admin.Incident.Placeholder.InternalDescription' | transloco\"\n                    class=\"quillEditor d-block\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['internal_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\" controlId=\"incident-started_at\" [useAriaLabelledbyOnly]=\"true\"\n                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                    <p-datepicker inputId=\"incident-started_at\" class=\"addEditincident\" [attr.aria-labelledby]=\"'incident-started_at-label'\" formControlName=\"started_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                      [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                    </p-datepicker>\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\" controlId=\"incident-resolved_at\" [useAriaLabelledbyOnly]=\"true\"\n                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                    <p-datepicker inputId=\"incident-resolved_at\" class=\"addEditincident\" [attr.aria-labelledby]=\"'incident-resolved_at-label'\" formControlName=\"resolved_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                      [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                    </p-datepicker>\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\" controlId=\"incident-last_check_at\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                    <p-datepicker inputId=\"incident-last_check_at\" class=\"addEditincident\" [attr.aria-labelledby]=\"'incident-last_check_at-label'\" formControlName=\"last_check_at\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                      [showIcon]=\"true\" [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                    </p-datepicker>\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                    (keydown.enter)=\"onCancel()\" (click)=\"onCancel()\"  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        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
+            args: [{ selector: 'pw-admin-add-edit-incident', standalone: false, 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 aria-label=\"Navigate to Target\" 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      @if (isLoading) {\n        <div class=\"w-100 text-center mt-3\"\n          >\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      <div class=\"p-2 mt-3\">\n        @if (!isLoading) {\n          <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n            <div class=\"row\">\n              <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.UrlImpacted' | transloco\"\n                name=\"url_impacted\" controlId=\"incident-url_impacted\" [errorMsg]=\"'Admin.Incident.Validation.UrlImpacted' | transloco\">\n                <input type=\"text\" id=\"incident-url_impacted\" formControlName=\"url_impacted\" class=\"form-control\"\n                  [placeholder]=\"'Admin.Incident.Placeholder.UrlImpacted' | transloco\"\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\" controlId=\"incident-service_impacted\"\n                [errorMsg]=\"'Admin.Incident.Validation.ServiceImpacted' | transloco\">\n                <input type=\"text\" id=\"incident-service_impacted\" formControlName=\"service_impacted\" class=\"form-control\"\n                  [placeholder]=\"'Admin.Incident.Placeholder.ServiceImpacted' | transloco\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['service_impacted'].errors }\" />\n              </pw-input-container>\n              <div class=\"col-lg-12\" id=\"descriptionEditor\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Incident.Description' | transloco\" name=\"description\" controlId=\"incident-description\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Incident.Validation.Description' | transloco\">\n                  <quill-editor [attr.aria-labelledby]=\"'incident-description-label'\" [styles]=\"{ height: '200px'}\" formControlName=\"description\" [modules]=\"editorConfig\"\n                    [placeholder]=\"'Admin.Incident.Placeholder.Description' | transloco\"\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=\"col-lg-12\" id=\"internalDescriptionEditor\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Incident.InternalDescription' | transloco\" name=\"internal_description\" controlId=\"incident-internal_description\" [useAriaLabelledbyOnly]=\"true\"\n                  [errorMsg]=\"'Admin.Incident.Validation.InternalDescription' | transloco\">\n                  <quill-editor [attr.aria-labelledby]=\"'incident-internal_description-label'\" [styles]=\"{ height: '200px'}\" formControlName=\"internal_description\" [modules]=\"editorConfig\"\n                    [placeholder]=\"'Admin.Incident.Placeholder.InternalDescription' | transloco\"\n                    class=\"quillEditor d-block\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['internal_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\" controlId=\"incident-started_at\" [useAriaLabelledbyOnly]=\"true\"\n                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                    <p-datepicker inputId=\"incident-started_at\" class=\"addEditincident\" [attr.aria-labelledby]=\"'incident-started_at-label'\" formControlName=\"started_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                      [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                    </p-datepicker>\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\" controlId=\"incident-resolved_at\" [useAriaLabelledbyOnly]=\"true\"\n                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                    <p-datepicker inputId=\"incident-resolved_at\" class=\"addEditincident\" [attr.aria-labelledby]=\"'incident-resolved_at-label'\" formControlName=\"resolved_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                      [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                    </p-datepicker>\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\" controlId=\"incident-last_check_at\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                    <p-datepicker inputId=\"incident-last_check_at\" class=\"addEditincident\" [attr.aria-labelledby]=\"'incident-last_check_at-label'\" formControlName=\"last_check_at\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                      [showIcon]=\"true\" [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                    </p-datepicker>\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                    (keydown.enter)=\"onCancel()\" (click)=\"onCancel()\"  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        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.CommonService }], propDecorators: { editForm: [{
                 type: ViewChild,
                 args: ['editForm', { static: false }]
@@ -3718,11 +3737,11 @@ class IncidentListComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IncidentListComponent, deps: [{ token: i0.Injector }, { token: i1$1.CommonService }, { token: i0.ChangeDetectorRef }, { token: i3$2.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: IncidentListComponent, isStandalone: false, 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\t(keydown.enter)=\"showList = !showList\"\n\t\t\taria-label=\"Navigate to Target\"\n\t\t\tclass=\"btn btn-sm btn-outline-primary float-end\"\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 class=\"col-12 mb-3\">\n    <p>The <strong>Incidents</strong> module lets you create and manage incident statuses. These incidents are publicly\n      visible at the <strong>/status</strong> endpoint.</p>\n  </div>\n</div>\n@if (!isLoaded) {\n\t<div class=\"w-100 text-center mt-3\">\n\t\t<p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n\t</div>\n}\n@if (showList) {\n<div class=\"row faqlist primeng-datatable-container actions-collapsed 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<label for=\"incidents-list-search\" class=\"visually-hidden\">Search Incident</label>\n\t\t\t\t\t\t<p-iconfield iconPosition=\"left\">\n\t\t\t\t\t\t\t<p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n\t\t\t\t\t\t\t<input id=\"incidents-list-search\"\n\t\t\t\t\t\t\t\tname=\"incidents-list-search\"\n\t\t\t\t\t\t\t\t[(ngModel)]=\"searchText\"\n\t\t\t\t\t\t\t\t(input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tpInputText\n\t\t\t\t\t\t\t\tplaceholder=\"Search incidents...\"\n\t\t\t\t\t\t\t\tdata-cy=\"incident-search\" />\n\t\t\t\t\t\t</p-iconfield>\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\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\t(keydown.enter)=\"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 pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-2\">\n\t\t\t\t\t\t\t\t<i\n\t\t\t\t\t\t\t\t(keydown.enter)=\"onDelete(incident)\"\n\t\t\t\t\t\t\t\t(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    @if (openIncidents.length === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\"\n          [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n\t@if (openIncidents.length !== 0) {\n\t\t<pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"openIncidents.length\" />\n\t}\n\t</div>\n</div>\n}\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n<pw-no-data [withImage]=\"true\"\n  [message]=\"'Admin.Incident.NoDataMessage' | transloco\">\n</pw-no-data>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.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: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: IncidentListComponent, isStandalone: false, 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\t(keydown.enter)=\"showList = !showList\"\n\t\t\taria-label=\"Navigate to Target\"\n\t\t\tclass=\"btn btn-sm btn-outline-primary float-end\"\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 class=\"col-12 mb-3\">\n    <p>The <strong>Incidents</strong> module lets you create and manage incident statuses. These incidents are publicly\n      visible at the <strong>/status</strong> endpoint.</p>\n  </div>\n</div>\n@if (!isLoaded) {\n\t<div class=\"w-100 text-center mt-3\">\n\t\t<p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n\t</div>\n}\n@if (showList) {\n<div class=\"row faqlist primeng-datatable-container actions-collapsed 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<label for=\"incidents-list-search\" class=\"visually-hidden\">Search Incident</label>\n\t\t\t\t\t\t<p-iconfield iconPosition=\"left\">\n\t\t\t\t\t\t\t<p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n\t\t\t\t\t\t\t<input id=\"incidents-list-search\"\n\t\t\t\t\t\t\t\tname=\"incidents-list-search\"\n\t\t\t\t\t\t\t\t[(ngModel)]=\"searchText\"\n\t\t\t\t\t\t\t\t(input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tpInputText\n\t\t\t\t\t\t\t\tplaceholder=\"Search incidents...\"\n\t\t\t\t\t\t\t\tdata-cy=\"incident-search\" />\n\t\t\t\t\t\t</p-iconfield>\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\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\t(keydown.enter)=\"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 pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-2\">\n\t\t\t\t\t\t\t\t<i\n\t\t\t\t\t\t\t\t(keydown.enter)=\"onDelete(incident)\"\n\t\t\t\t\t\t\t\t(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    @if (openIncidents.length === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\"\n          [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n\t@if (openIncidents.length !== 0) {\n\t\t<pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"openIncidents.length\" />\n\t}\n\t</div>\n</div>\n}\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n<pw-no-data [withImage]=\"true\"\n  [message]=\"'Admin.Incident.NoDataMessage' | transloco\">\n</pw-no-data>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.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: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IncidentListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-incident-list', standalone: false, 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\t(keydown.enter)=\"showList = !showList\"\n\t\t\taria-label=\"Navigate to Target\"\n\t\t\tclass=\"btn btn-sm btn-outline-primary float-end\"\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 class=\"col-12 mb-3\">\n    <p>The <strong>Incidents</strong> module lets you create and manage incident statuses. These incidents are publicly\n      visible at the <strong>/status</strong> endpoint.</p>\n  </div>\n</div>\n@if (!isLoaded) {\n\t<div class=\"w-100 text-center mt-3\">\n\t\t<p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n\t</div>\n}\n@if (showList) {\n<div class=\"row faqlist primeng-datatable-container actions-collapsed 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<label for=\"incidents-list-search\" class=\"visually-hidden\">Search Incident</label>\n\t\t\t\t\t\t<p-iconfield iconPosition=\"left\">\n\t\t\t\t\t\t\t<p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n\t\t\t\t\t\t\t<input id=\"incidents-list-search\"\n\t\t\t\t\t\t\t\tname=\"incidents-list-search\"\n\t\t\t\t\t\t\t\t[(ngModel)]=\"searchText\"\n\t\t\t\t\t\t\t\t(input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tpInputText\n\t\t\t\t\t\t\t\tplaceholder=\"Search incidents...\"\n\t\t\t\t\t\t\t\tdata-cy=\"incident-search\" />\n\t\t\t\t\t\t</p-iconfield>\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\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\t(keydown.enter)=\"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 pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-2\">\n\t\t\t\t\t\t\t\t<i\n\t\t\t\t\t\t\t\t(keydown.enter)=\"onDelete(incident)\"\n\t\t\t\t\t\t\t\t(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    @if (openIncidents.length === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\"\n          [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n\t@if (openIncidents.length !== 0) {\n\t\t<pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"openIncidents.length\" />\n\t}\n\t</div>\n</div>\n}\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n<pw-no-data [withImage]=\"true\"\n  [message]=\"'Admin.Incident.NoDataMessage' | transloco\">\n</pw-no-data>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.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', standalone: false, 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\t(keydown.enter)=\"showList = !showList\"\n\t\t\taria-label=\"Navigate to Target\"\n\t\t\tclass=\"btn btn-sm btn-outline-primary float-end\"\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 class=\"col-12 mb-3\">\n    <p>The <strong>Incidents</strong> module lets you create and manage incident statuses. These incidents are publicly\n      visible at the <strong>/status</strong> endpoint.</p>\n  </div>\n</div>\n@if (!isLoaded) {\n\t<div class=\"w-100 text-center mt-3\">\n\t\t<p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n\t</div>\n}\n@if (showList) {\n<div class=\"row faqlist primeng-datatable-container actions-collapsed 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<label for=\"incidents-list-search\" class=\"visually-hidden\">Search Incident</label>\n\t\t\t\t\t\t<p-iconfield iconPosition=\"left\">\n\t\t\t\t\t\t\t<p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n\t\t\t\t\t\t\t<input id=\"incidents-list-search\"\n\t\t\t\t\t\t\t\tname=\"incidents-list-search\"\n\t\t\t\t\t\t\t\t[(ngModel)]=\"searchText\"\n\t\t\t\t\t\t\t\t(input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tpInputText\n\t\t\t\t\t\t\t\tplaceholder=\"Search incidents...\"\n\t\t\t\t\t\t\t\tdata-cy=\"incident-search\" />\n\t\t\t\t\t\t</p-iconfield>\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\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\t(keydown.enter)=\"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 pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-2\">\n\t\t\t\t\t\t\t\t<i\n\t\t\t\t\t\t\t\t(keydown.enter)=\"onDelete(incident)\"\n\t\t\t\t\t\t\t\t(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    @if (openIncidents.length === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\"\n          [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n\t@if (openIncidents.length !== 0) {\n\t\t<pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"openIncidents.length\" />\n\t}\n\t</div>\n</div>\n}\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n<pw-no-data [withImage]=\"true\"\n  [message]=\"'Admin.Incident.NoDataMessage' | transloco\">\n</pw-no-data>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.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 }, { type: i0.ChangeDetectorRef }, { type: i3$2.ConfirmDialogService }] });
 
 class IncidentTabsComponent {
@@ -4789,11 +4808,11 @@ class NewslettersItemsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NewslettersItemsComponent, deps: [{ token: i1.AdminService }, { token: i1$1.AuthService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3$2.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NewslettersItemsComponent, isStandalone: false, selector: "pw-newsletters-items", 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\">Newsletters Items</h2>\n    <button *rbacAllow=\"'SubscriptionAdmin || Pages.Role.MarketingManager || Pages.Role.CustomerSuccessManager'\"\n      class=\"btn btn-sm btn-outline-primary float-end m-0\"\n      (click)=\"navigateToCreateNewsletterItem()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Newsletter Item\n    </button>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n  [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"row\">\n    <div class=\"col-4\">\n      <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"newsletters-items-filter\" [options]=\"newsletters\"\n        [(ngModel)]=\"selectedNewsletterIds\"\n        (onChange)=\"onNewsletterChange($event)\"\n        placeholder='Filter by newsletters'\n        appendTo=\"body\">\n      </p-multiSelect>\n    </div>\n    <div class=\"col-8 d-flex justify-content-end\">\n      <div>\n        <label for=\"newsletters-items-search\" class=\"visually-hidden\">Search</label>\n        <p-iconfield iconPosition=\"left\">\n          <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n          <input type=\"text\"\n            id=\"newsletters-items-search\"\n            name=\"newsletters-items-search\"\n            [(ngModel)]=\"searchTextItems\"\n            pInputText\n            placeholder=\"Search...\"\n            data-cy=\"user-search\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n        </p-iconfield>\n      </div>\n    </div>\n\n  </div>\n  <p-table #dt\n    [value]=\"newslettersItems\"\n    [paginator]=\"newslettersItemsTotal !== 0\"\n    [globalFilterFields]=\"['title']\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"newslettersItemsTotal\"\n    [lazy]=\"true\"\n    (onLazyLoad)=\"onLazyLoadNewsletterItems($event)\"\n    [loading]=\"isLoading\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Admin.NewsletterItem.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"send_until\">\n          {{ 'Admin.NewsletterItem.SendUntil' | transloco }}\n          <p-sortIcon field=\"send_until\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_pushed\">\n          {{ 'Admin.NewsletterItem.Pushed' | transloco }}\n          <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_sent\">\n          {{ 'Admin.NewsletterItem.Sent' | transloco }}\n          <p-sortIcon field=\"is_sent\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-four\"\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=\"Title\">\n          <a target=\"_blank\" [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\">{{\n            item.title\n            }}\n          </a>\n          @if (item?.location) {\n            <i class=\"far fa-info-circle info-icon text-muted\"\n            [pTooltip]=\"item?.location\" tooltipPosition=\"top\" appendTo=\"body\"></i>\n          }\n        </td>\n        <td data-head=\"Body\"\n          class=\"custom-td\">\n          {{ item.body | removeHtml: 'quill' | textTruncate: 200 }}\n        </td>\n        <td data-head=\"Send Until\">\n          <span [ngClass]=\"getSendUntilColor(item?.send_until)\">{{\n            item.send_until | dateFormat\n          }}</span>\n        </td>\n        <td data-head=\"Is Pushed\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.is_pushed }}</span>\n        </td>\n        <td data-head=\"Is Sent\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.is_sent }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li pTooltip=\"Send test email\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\">\n              <i\n                class=\"fa fa-comment-alt cta1-icon\"\n                (click)=\"sendTestEmail(item)\"\n                (keydown.enter)=\"sendTestEmail(item)\"\n                aria-hidden=\"true\"\n              ></i>\n            </li>\n            <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\"\n              [routerLink]=\"[routers.newsletterItemDetails + item.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\"\n              (keydown.enter)=\"onDelete(item)\"\n              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"View Newsletter\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\">\n              <a [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\" target=\"_blank\" aria-label=\"Newsletter Item View\">\n                <i class=\"fa fa-eye eye-icon\" aria-hidden=\"true\"></i>\n              </a>\n            </li>\n            <li pTooltip=\"Newsletter recipients\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\"\n              [routerLink]=\"[routers.newslettersUserList + 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  @if (newslettersItemsTotal === 0 && totalRecordsUnFiltered !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (newslettersItemsTotal !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"newslettersItemsTotal\" />\n  }\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.NewsletterItem.NewsletterItemsNoDataMessage' | transloco\">\n    </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.custom-td{max-width:400px;word-break:break-all}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}.list-action{width:max-content}.info-icon{vertical-align:middle;margin-left:5px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NewslettersItemsComponent, isStandalone: false, selector: "pw-newsletters-items", 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\">Newsletters Items</h2>\n    <button *rbacAllow=\"'SubscriptionAdmin || Pages.Role.MarketingManager || Pages.Role.CustomerSuccessManager'\"\n      class=\"btn btn-sm btn-outline-primary float-end m-0\"\n      (click)=\"navigateToCreateNewsletterItem()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Newsletter Item\n    </button>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n  [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"row\">\n    <div class=\"col-4\">\n      <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"newsletters-items-filter\" [options]=\"newsletters\"\n        [(ngModel)]=\"selectedNewsletterIds\"\n        (onChange)=\"onNewsletterChange($event)\"\n        placeholder='Filter by newsletters'\n        appendTo=\"body\">\n      </p-multiSelect>\n    </div>\n    <div class=\"col-8 d-flex justify-content-end\">\n      <div>\n        <label for=\"newsletters-items-search\" class=\"visually-hidden\">Search</label>\n        <p-iconfield iconPosition=\"left\">\n          <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n          <input type=\"text\"\n            id=\"newsletters-items-search\"\n            name=\"newsletters-items-search\"\n            [(ngModel)]=\"searchTextItems\"\n            pInputText\n            placeholder=\"Search...\"\n            data-cy=\"user-search\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n        </p-iconfield>\n      </div>\n    </div>\n\n  </div>\n  <p-table #dt\n    [value]=\"newslettersItems\"\n    [paginator]=\"newslettersItemsTotal !== 0\"\n    [globalFilterFields]=\"['title']\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"newslettersItemsTotal\"\n    [lazy]=\"true\"\n    (onLazyLoad)=\"onLazyLoadNewsletterItems($event)\"\n    [loading]=\"isLoading\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Admin.NewsletterItem.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"send_until\">\n          {{ 'Admin.NewsletterItem.SendUntil' | transloco }}\n          <p-sortIcon field=\"send_until\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_pushed\">\n          {{ 'Admin.NewsletterItem.Pushed' | transloco }}\n          <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_sent\">\n          {{ 'Admin.NewsletterItem.Sent' | transloco }}\n          <p-sortIcon field=\"is_sent\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-four\"\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=\"Title\">\n          <a target=\"_blank\" [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\">{{\n            item.title\n            }}\n          </a>\n          @if (item?.location) {\n            <i class=\"far fa-info-circle info-icon text-muted\"\n            [pTooltip]=\"item?.location\" tooltipPosition=\"top\" appendTo=\"body\"></i>\n          }\n        </td>\n        <td data-head=\"Body\"\n          class=\"custom-td\">\n          {{ item.body | removeHtml: 'quill' | textTruncate: 200 }}\n        </td>\n        <td data-head=\"Send Until\">\n          <span [ngClass]=\"getSendUntilColor(item?.send_until)\">{{\n            item.send_until | dateFormat\n          }}</span>\n        </td>\n        <td data-head=\"Is Pushed\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.is_pushed }}</span>\n        </td>\n        <td data-head=\"Is Sent\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.is_sent }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li pTooltip=\"Send test email\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\">\n              <i\n                class=\"fa fa-comment-alt cta1-icon\"\n                (click)=\"sendTestEmail(item)\"\n                (keydown.enter)=\"sendTestEmail(item)\"\n                aria-hidden=\"true\"\n              ></i>\n            </li>\n            <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\"\n              [routerLink]=\"[routers.newsletterItemDetails + item.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\"\n              (keydown.enter)=\"onDelete(item)\"\n              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"View Newsletter\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\">\n              <a [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\" target=\"_blank\" aria-label=\"Newsletter Item View\">\n                <i class=\"fa fa-eye eye-icon\" aria-hidden=\"true\"></i>\n              </a>\n            </li>\n            <li pTooltip=\"Newsletter recipients\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\"\n              [routerLink]=\"[routers.newslettersUserList + 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  @if (newslettersItemsTotal === 0 && totalRecordsUnFiltered !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (newslettersItemsTotal !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"newslettersItemsTotal\" />\n  }\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.NewsletterItem.NewsletterItemsNoDataMessage' | transloco\">\n    </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.custom-td{max-width:400px;word-break:break-all}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}.list-action{width:max-content}.info-icon{vertical-align:middle;margin-left:5px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NewslettersItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-newsletters-items', standalone: false, 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\">Newsletters Items</h2>\n    <button *rbacAllow=\"'SubscriptionAdmin || Pages.Role.MarketingManager || Pages.Role.CustomerSuccessManager'\"\n      class=\"btn btn-sm btn-outline-primary float-end m-0\"\n      (click)=\"navigateToCreateNewsletterItem()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Newsletter Item\n    </button>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n  [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"row\">\n    <div class=\"col-4\">\n      <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"newsletters-items-filter\" [options]=\"newsletters\"\n        [(ngModel)]=\"selectedNewsletterIds\"\n        (onChange)=\"onNewsletterChange($event)\"\n        placeholder='Filter by newsletters'\n        appendTo=\"body\">\n      </p-multiSelect>\n    </div>\n    <div class=\"col-8 d-flex justify-content-end\">\n      <div>\n        <label for=\"newsletters-items-search\" class=\"visually-hidden\">Search</label>\n        <p-iconfield iconPosition=\"left\">\n          <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n          <input type=\"text\"\n            id=\"newsletters-items-search\"\n            name=\"newsletters-items-search\"\n            [(ngModel)]=\"searchTextItems\"\n            pInputText\n            placeholder=\"Search...\"\n            data-cy=\"user-search\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n        </p-iconfield>\n      </div>\n    </div>\n\n  </div>\n  <p-table #dt\n    [value]=\"newslettersItems\"\n    [paginator]=\"newslettersItemsTotal !== 0\"\n    [globalFilterFields]=\"['title']\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"newslettersItemsTotal\"\n    [lazy]=\"true\"\n    (onLazyLoad)=\"onLazyLoadNewsletterItems($event)\"\n    [loading]=\"isLoading\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Admin.NewsletterItem.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"send_until\">\n          {{ 'Admin.NewsletterItem.SendUntil' | transloco }}\n          <p-sortIcon field=\"send_until\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_pushed\">\n          {{ 'Admin.NewsletterItem.Pushed' | transloco }}\n          <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_sent\">\n          {{ 'Admin.NewsletterItem.Sent' | transloco }}\n          <p-sortIcon field=\"is_sent\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-four\"\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=\"Title\">\n          <a target=\"_blank\" [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\">{{\n            item.title\n            }}\n          </a>\n          @if (item?.location) {\n            <i class=\"far fa-info-circle info-icon text-muted\"\n            [pTooltip]=\"item?.location\" tooltipPosition=\"top\" appendTo=\"body\"></i>\n          }\n        </td>\n        <td data-head=\"Body\"\n          class=\"custom-td\">\n          {{ item.body | removeHtml: 'quill' | textTruncate: 200 }}\n        </td>\n        <td data-head=\"Send Until\">\n          <span [ngClass]=\"getSendUntilColor(item?.send_until)\">{{\n            item.send_until | dateFormat\n          }}</span>\n        </td>\n        <td data-head=\"Is Pushed\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.is_pushed }}</span>\n        </td>\n        <td data-head=\"Is Sent\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.is_sent }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li pTooltip=\"Send test email\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\">\n              <i\n                class=\"fa fa-comment-alt cta1-icon\"\n                (click)=\"sendTestEmail(item)\"\n                (keydown.enter)=\"sendTestEmail(item)\"\n                aria-hidden=\"true\"\n              ></i>\n            </li>\n            <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\"\n              [routerLink]=\"[routers.newsletterItemDetails + item.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\"\n              (keydown.enter)=\"onDelete(item)\"\n              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"View Newsletter\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\">\n              <a [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\" target=\"_blank\" aria-label=\"Newsletter Item View\">\n                <i class=\"fa fa-eye eye-icon\" aria-hidden=\"true\"></i>\n              </a>\n            </li>\n            <li pTooltip=\"Newsletter recipients\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\"\n              [routerLink]=\"[routers.newslettersUserList + 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  @if (newslettersItemsTotal === 0 && totalRecordsUnFiltered !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (newslettersItemsTotal !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"newslettersItemsTotal\" />\n  }\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.NewsletterItem.NewsletterItemsNoDataMessage' | transloco\">\n    </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.custom-td{max-width:400px;word-break:break-all}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}.list-action{width:max-content}.info-icon{vertical-align:middle;margin-left:5px}\n"] }]
+            args: [{ selector: 'pw-newsletters-items', standalone: false, 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\">Newsletters Items</h2>\n    <button *rbacAllow=\"'SubscriptionAdmin || Pages.Role.MarketingManager || Pages.Role.CustomerSuccessManager'\"\n      class=\"btn btn-sm btn-outline-primary float-end m-0\"\n      (click)=\"navigateToCreateNewsletterItem()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Newsletter Item\n    </button>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n  [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"row\">\n    <div class=\"col-4\">\n      <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"newsletters-items-filter\" [options]=\"newsletters\"\n        [(ngModel)]=\"selectedNewsletterIds\"\n        (onChange)=\"onNewsletterChange($event)\"\n        placeholder='Filter by newsletters'\n        appendTo=\"body\">\n      </p-multiSelect>\n    </div>\n    <div class=\"col-8 d-flex justify-content-end\">\n      <div>\n        <label for=\"newsletters-items-search\" class=\"visually-hidden\">Search</label>\n        <p-iconfield iconPosition=\"left\">\n          <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n          <input type=\"text\"\n            id=\"newsletters-items-search\"\n            name=\"newsletters-items-search\"\n            [(ngModel)]=\"searchTextItems\"\n            pInputText\n            placeholder=\"Search...\"\n            data-cy=\"user-search\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n        </p-iconfield>\n      </div>\n    </div>\n\n  </div>\n  <p-table #dt\n    [value]=\"newslettersItems\"\n    [paginator]=\"newslettersItemsTotal !== 0\"\n    [globalFilterFields]=\"['title']\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"newslettersItemsTotal\"\n    [lazy]=\"true\"\n    (onLazyLoad)=\"onLazyLoadNewsletterItems($event)\"\n    [loading]=\"isLoading\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Admin.NewsletterItem.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"send_until\">\n          {{ 'Admin.NewsletterItem.SendUntil' | transloco }}\n          <p-sortIcon field=\"send_until\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_pushed\">\n          {{ 'Admin.NewsletterItem.Pushed' | transloco }}\n          <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_sent\">\n          {{ 'Admin.NewsletterItem.Sent' | transloco }}\n          <p-sortIcon field=\"is_sent\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-four\"\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=\"Title\">\n          <a target=\"_blank\" [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\">{{\n            item.title\n            }}\n          </a>\n          @if (item?.location) {\n            <i class=\"far fa-info-circle info-icon text-muted\"\n            [pTooltip]=\"item?.location\" tooltipPosition=\"top\" appendTo=\"body\"></i>\n          }\n        </td>\n        <td data-head=\"Body\"\n          class=\"custom-td\">\n          {{ item.body | removeHtml: 'quill' | textTruncate: 200 }}\n        </td>\n        <td data-head=\"Send Until\">\n          <span [ngClass]=\"getSendUntilColor(item?.send_until)\">{{\n            item.send_until | dateFormat\n          }}</span>\n        </td>\n        <td data-head=\"Is Pushed\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.is_pushed }}</span>\n        </td>\n        <td data-head=\"Is Sent\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.is_sent }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li pTooltip=\"Send test email\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\">\n              <i\n                class=\"fa fa-comment-alt cta1-icon\"\n                (click)=\"sendTestEmail(item)\"\n                (keydown.enter)=\"sendTestEmail(item)\"\n                aria-hidden=\"true\"\n              ></i>\n            </li>\n            <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\"\n              [routerLink]=\"[routers.newsletterItemDetails + item.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\"\n              (keydown.enter)=\"onDelete(item)\"\n              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"View Newsletter\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\">\n              <a [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\" target=\"_blank\" aria-label=\"Newsletter Item View\">\n                <i class=\"fa fa-eye eye-icon\" aria-hidden=\"true\"></i>\n              </a>\n            </li>\n            <li pTooltip=\"Newsletter recipients\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-2\"\n              [routerLink]=\"[routers.newslettersUserList + 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  @if (newslettersItemsTotal === 0 && totalRecordsUnFiltered !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (newslettersItemsTotal !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"newslettersItemsTotal\" />\n  }\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.NewsletterItem.NewsletterItemsNoDataMessage' | transloco\">\n    </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.custom-td{max-width:400px;word-break:break-all}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}.list-action{width:max-content}.info-icon{vertical-align:middle;margin-left:5px}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i1$1.AuthService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i3$2.ConfirmDialogService }] });
 
 class NewsLetterItemViewComponent extends AppBaseComponent {
@@ -5308,11 +5327,11 @@ class PermissionsListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PermissionsListComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3$2.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PermissionsListComponent, isStandalone: false, 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\">{{ 'Label.Permissions' | transloco }}</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> {{ 'Admin.Permissions.Create' | transloco }}\n    </button>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed 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        <label for=\"permissions-list-search\" class=\"visually-hidden\">{{ 'Admin.Permissions.SearchAriaLabel' | transloco }}</label>\n        <p-iconfield iconPosition=\"left\">\n          <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n          <input type=\"text\"\n            id=\"permissions-list-search\"\n            name=\"permissions-list-search\"\n            [(ngModel)]=\"searchText\"\n            pInputText\n            [placeholder]=\"'Admin.Permissions.SearchPlaceholder' | transloco\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n        </p-iconfield>\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 ? 'Label.Yes' : 'Label.No') | transloco }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li [pTooltip]=\"'Button.Edit' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"\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 [pTooltip]=\"'Button.Delete' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\">\n              <i\n                (click)=\"onDelete(permissions)\"\n                (keydown.enter)=\"onDelete(permissions)\"\n                (keydown.space)=\"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  @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n      </pw-no-data>\n    </div>\n  }\n  @if (data.object_count !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n  }\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PermissionsListComponent, isStandalone: false, 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\">{{ 'Label.Permissions' | transloco }}</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> {{ 'Admin.Permissions.Create' | transloco }}\n    </button>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed 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        <label for=\"permissions-list-search\" class=\"visually-hidden\">{{ 'Admin.Permissions.SearchAriaLabel' | transloco }}</label>\n        <p-iconfield iconPosition=\"left\">\n          <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n          <input type=\"text\"\n            id=\"permissions-list-search\"\n            name=\"permissions-list-search\"\n            [(ngModel)]=\"searchText\"\n            pInputText\n            [placeholder]=\"'Admin.Permissions.SearchPlaceholder' | transloco\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n        </p-iconfield>\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 ? 'Label.Yes' : 'Label.No') | transloco }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li [pTooltip]=\"'Button.Edit' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"\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 [pTooltip]=\"'Button.Delete' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\">\n              <i\n                (click)=\"onDelete(permissions)\"\n                (keydown.enter)=\"onDelete(permissions)\"\n                (keydown.space)=\"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  @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n      </pw-no-data>\n    </div>\n  }\n  @if (data.object_count !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n  }\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PermissionsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-permissions-list', standalone: false, 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\">{{ 'Label.Permissions' | transloco }}</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> {{ 'Admin.Permissions.Create' | transloco }}\n    </button>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed 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        <label for=\"permissions-list-search\" class=\"visually-hidden\">{{ 'Admin.Permissions.SearchAriaLabel' | transloco }}</label>\n        <p-iconfield iconPosition=\"left\">\n          <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n          <input type=\"text\"\n            id=\"permissions-list-search\"\n            name=\"permissions-list-search\"\n            [(ngModel)]=\"searchText\"\n            pInputText\n            [placeholder]=\"'Admin.Permissions.SearchPlaceholder' | transloco\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n        </p-iconfield>\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 ? 'Label.Yes' : 'Label.No') | transloco }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li [pTooltip]=\"'Button.Edit' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"\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 [pTooltip]=\"'Button.Delete' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\">\n              <i\n                (click)=\"onDelete(permissions)\"\n                (keydown.enter)=\"onDelete(permissions)\"\n                (keydown.space)=\"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  @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n      </pw-no-data>\n    </div>\n  }\n  @if (data.object_count !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n  }\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
+            args: [{ selector: 'pw-permissions-list', standalone: false, 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\">{{ 'Label.Permissions' | transloco }}</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> {{ 'Admin.Permissions.Create' | transloco }}\n    </button>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed 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        <label for=\"permissions-list-search\" class=\"visually-hidden\">{{ 'Admin.Permissions.SearchAriaLabel' | transloco }}</label>\n        <p-iconfield iconPosition=\"left\">\n          <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n          <input type=\"text\"\n            id=\"permissions-list-search\"\n            name=\"permissions-list-search\"\n            [(ngModel)]=\"searchText\"\n            pInputText\n            [placeholder]=\"'Admin.Permissions.SearchPlaceholder' | transloco\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n        </p-iconfield>\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 ? 'Label.Yes' : 'Label.No') | transloco }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li [pTooltip]=\"'Button.Edit' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"\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 [pTooltip]=\"'Button.Delete' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\">\n              <i\n                (click)=\"onDelete(permissions)\"\n                (keydown.enter)=\"onDelete(permissions)\"\n                (keydown.space)=\"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  @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n      </pw-no-data>\n    </div>\n  }\n  @if (data.object_count !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n  }\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i3$2.ConfirmDialogService }] });
 
 class PermissionsTabsComponent {
@@ -5547,11 +5566,11 @@ class RolesListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RolesListComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3$2.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: RolesListComponent, isStandalone: false, 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@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed 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        <label for=\"roles-list-search\" class=\"visually-hidden\">Search Role</label>\n        <p-iconfield iconPosition=\"left\">\n          <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n          <input type=\"text\"\n            id=\"roles-list-search\"\n            name=\"roles-list-search\"\n            [(ngModel)]=\"searchText\"\n            pInputText\n            placeholder=\"Search roles...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n        </p-iconfield>\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\">\n              <i\n                (click)=\"onDeleteRole(role)\"\n                (keydown.enter)=\"onDeleteRole(role)\"\n                (keydown.space)=\"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  @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n      </pw-no-data>\n    </div>\n  }\n  @if (totalRecords !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n  }\n</div>\n\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: RolesListComponent, isStandalone: false, 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@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed 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        <label for=\"roles-list-search\" class=\"visually-hidden\">Search Role</label>\n        <p-iconfield iconPosition=\"left\">\n          <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n          <input type=\"text\"\n            id=\"roles-list-search\"\n            name=\"roles-list-search\"\n            [(ngModel)]=\"searchText\"\n            pInputText\n            placeholder=\"Search roles...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n        </p-iconfield>\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\">\n              <i\n                (click)=\"onDeleteRole(role)\"\n                (keydown.enter)=\"onDeleteRole(role)\"\n                (keydown.space)=\"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  @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n      </pw-no-data>\n    </div>\n  }\n  @if (totalRecords !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n  }\n</div>\n\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RolesListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-roles-list', standalone: false, 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@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed 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        <label for=\"roles-list-search\" class=\"visually-hidden\">Search Role</label>\n        <p-iconfield iconPosition=\"left\">\n          <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n          <input type=\"text\"\n            id=\"roles-list-search\"\n            name=\"roles-list-search\"\n            [(ngModel)]=\"searchText\"\n            pInputText\n            placeholder=\"Search roles...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n        </p-iconfield>\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\">\n              <i\n                (click)=\"onDeleteRole(role)\"\n                (keydown.enter)=\"onDeleteRole(role)\"\n                (keydown.space)=\"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  @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n      </pw-no-data>\n    </div>\n  }\n  @if (totalRecords !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n  }\n</div>\n\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
+            args: [{ selector: 'pw-admin-roles-list', standalone: false, 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@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed 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        <label for=\"roles-list-search\" class=\"visually-hidden\">Search Role</label>\n        <p-iconfield iconPosition=\"left\">\n          <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n          <input type=\"text\"\n            id=\"roles-list-search\"\n            name=\"roles-list-search\"\n            [(ngModel)]=\"searchText\"\n            pInputText\n            placeholder=\"Search roles...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n        </p-iconfield>\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\">\n              <i\n                (click)=\"onDeleteRole(role)\"\n                (keydown.enter)=\"onDeleteRole(role)\"\n                (keydown.space)=\"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  @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n      </pw-no-data>\n    </div>\n  }\n  @if (totalRecords !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n  }\n</div>\n\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i3$2.ConfirmDialogService }] });
 
 class ProductDetailsComponent extends AppBaseComponent {
@@ -6080,11 +6099,11 @@ class ProductsListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProductsListComponent, deps: [{ token: i1$1.ProductService }, { token: i1$1.AuthService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ProductsListComponent, isStandalone: false, selector: "pw-admin-products-list", viewQueries: [{ propertyName: "passwordValidationModalForProductDelete", first: true, predicate: ["passwordValidationModalForProductDelete"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"col-xs-12 text-end d-flex justify-content-between align-items-center\">\n  <h2 class=\"card-title p-0 float-start\">Products</h2>\n  <button *rbacAllow=\"'Pages.Admin.Product.Create'\"\n    class=\"btn btn-sm btn-outline-primary\"\n    [routerLink]=\"[routers.productDetails + 'add']\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Setup New Product\n  </button>\n</div>\n@if (loading) {\n  <div class=\"w-100 text-center mt-3\">\n    <p-progressSpinner> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n  [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <p-table #dt\n    [value]=\"products\"\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-12 col-sm-4\">\n          <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"products-list-feature-keys\" placeholder=\"Filter by feature keys\"\n            [options]=\"featureKeysList\"\n            (onChange)=\"onSearchOptionChange($event)\"\n            [showHeader]=\"true\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end\">\n          <label for=\"products-list-search\" class=\"visually-hidden\">Search Product</label>\n          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"products-list-search\"\n              name=\"products-list-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search products...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr class=\"head\">\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=\"stripe_plan_id\">\n          {{ 'Admin.Products.StripePlan' | transloco }}\n          <p-sortIcon field=\"stripe_plan_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"permission_key\">\n          {{ 'Admin.Products.PermissionKey' | transloco }}\n          <p-sortIcon field=\"permission_key\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"feature_key\">\n          {{ 'Admin.Products.FeatureKey' | transloco }}\n          <p-sortIcon field=\"feature_key\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"product_key\">\n          {{ 'Admin.Products.ProductKey' | transloco }}\n          <p-sortIcon field=\"product_key\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"category\">\n          {{ 'Admin.Products.Category' | transloco }}\n          <p-sortIcon field=\"category\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"region\">\n          {{ 'Admin.Products.Region' | transloco }}\n          <p-sortIcon field=\"region\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"currency\">\n          {{ 'Admin.Products.Currency' | transloco }}\n          <p-sortIcon field=\"currency\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"price_per_unit\">\n          {{ 'Admin.Products.Price' | transloco }}\n          <p-sortIcon field=\"price_per_unit\"></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=\"billing_frequency\">\n          {{ 'Admin.Products.Billing' | transloco }}\n          <p-sortIcon field=\"billing_frequency\"></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-item>\n      <tr>\n        <td data-head=\"Name\">{{ item.name }}</td>\n        <td data-head=\"Stripe Plan\">{{ item.stripe_plan_id }}</td>\n        <td data-head=\"Permission Key\">{{ item.permission_key }}</td>\n        <td data-head=\"Feature Key\">{{ item.feature_key }}</td>\n        <td data-head=\"Product Key\">{{ item.product_key }}</td>\n        <td data-head=\"Category\">\n          <span [appDynamicBadge]=\"{ itemsArray: categories, item: item.category }\"\n            color=\"warning\"\n            class=\"badge\">{{ item.category }}</span>\n        </td>\n        <td data-head=\"Region\">\n          <span [appDynamicBadge]=\"{ itemsArray: regions, item: item.region }\"\n            color=\"cyan\"\n            class=\"badge\">{{ item.region }}</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\">{{ item.price_per_unit }}</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=\"Billing\">\n          <span class=\"badge\"\n            [appDynamicBadge]=\"{\n                            itemsArray: billingFrequency,\n                            item: item?.billing_frequency\n                        }\"\n            color=\"blue-grey\">{{ item.billing_frequency }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline width-max-content\">\n            <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n              [routerLink]=\"[routers.productDetails + item.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Product.Delete'\"\n              (keydown.enter)=\"onDelete(item)\"\n              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Users List\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n              [routerLink]=\"[routers.productsUserList + item.id]\">\n              <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Duplicate The Product\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-sm-3\"\n              [routerLink]=\"[routers.productDetails + 'add']\"\n              [queryParams]=\"{ duplicate_product_id: item.id }\">\n              <i class=\"fa fa-clone edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Feedback Questions\" tooltipPosition=\"top\"\n              appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.feedbackQuestions]\"\n              [queryParams]=\"{ product_id: item.id }\">\n              <i class=\"fa fa-comments edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (totalRecords !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n  }\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Products.NoDataMessage' | transloco\"> </pw-no-data>\n}\n<!-- password validation modal for delete product -->\n<pw-password-validation #passwordValidationModalForProductDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteProduct($event)\">\n</pw-password-validation>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.table-responsive td{padding:6px 10px!important;line-height:1.4;vertical-align:middle;word-break:break-word}.table-responsive th{vertical-align:bottom}.table-responsive td[data-head=Name]{font-weight:600;color:#1a1d21}.table-responsive td[data-head=\"Stripe Plan\"],.table-responsive td[data-head=\"Permission Key\"],.table-responsive td[data-head=\"Feature Key\"],.table-responsive td[data-head=\"Product Key\"]{color:#5a6473;font-variant-numeric:tabular-nums}.table-responsive td[data-head=Price]{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(9){text-align:right}.table-responsive .badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;letter-spacing:.01em}.table-responsive .badge[class*=bg-success]{background-color:#e6f4ec!important;color:#0f6b3a!important}.table-responsive .badge[class*=bg-danger]{background-color:#fbeae8!important;color:#c0392b!important}.table-responsive .badge.bg-warning{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-1{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-2{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-3{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-4{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-5{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-6{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-7{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-8{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-9{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-10{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-11{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-12{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-13{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-14{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-15{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-16{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-17{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-18{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-19{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-20{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-21{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-22{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-23{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-24{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-cyan{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-1{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-2{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-3{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-4{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-5{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-6{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-7{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-8{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-9{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-10{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-11{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-12{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-13{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-14{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-15{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-16{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-17{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-18{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-19{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-20{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-21{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-22{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-23{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-24{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-blue-grey{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-1{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-2{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-3{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-4{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-5{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-6{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-7{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-8{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-9{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-10{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-11{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-12{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-13{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-14{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-15{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-16{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-17{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-18{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-19{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-20{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-21{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-22{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-23{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-24{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-cyan-default{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-default-change{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-success:before,.table-responsive .badge.bg-danger:before{content:\"\";display:inline-block;box-sizing:border-box;width:7px;height:7px;margin-right:6px;border-radius:50%;vertical-align:middle}.table-responsive .badge.bg-success:before{background-color:currentColor}.table-responsive .badge.bg-danger:before{background-color:transparent;border:1.5px solid currentColor}.width-max-content{width:max-content}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ProductsListComponent, isStandalone: false, selector: "pw-admin-products-list", viewQueries: [{ propertyName: "passwordValidationModalForProductDelete", first: true, predicate: ["passwordValidationModalForProductDelete"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"col-xs-12 text-end d-flex justify-content-between align-items-center\">\n  <h2 class=\"card-title p-0 float-start\">Products</h2>\n  <button *rbacAllow=\"'Pages.Admin.Product.Create'\"\n    class=\"btn btn-sm btn-outline-primary\"\n    [routerLink]=\"[routers.productDetails + 'add']\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Setup New Product\n  </button>\n</div>\n@if (loading) {\n  <div class=\"w-100 text-center mt-3\">\n    <p-progressSpinner> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n  [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <p-table #dt\n    [value]=\"products\"\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-12 col-sm-4\">\n          <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"products-list-feature-keys\" placeholder=\"Filter by feature keys\"\n            [options]=\"featureKeysList\"\n            (onChange)=\"onSearchOptionChange($event)\"\n            [showHeader]=\"true\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end\">\n          <label for=\"products-list-search\" class=\"visually-hidden\">Search Product</label>\n          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"products-list-search\"\n              name=\"products-list-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search products...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr class=\"head\">\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=\"stripe_plan_id\">\n          {{ 'Admin.Products.StripePlan' | transloco }}\n          <p-sortIcon field=\"stripe_plan_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"permission_key\">\n          {{ 'Admin.Products.PermissionKey' | transloco }}\n          <p-sortIcon field=\"permission_key\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"feature_key\">\n          {{ 'Admin.Products.FeatureKey' | transloco }}\n          <p-sortIcon field=\"feature_key\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"product_key\">\n          {{ 'Admin.Products.ProductKey' | transloco }}\n          <p-sortIcon field=\"product_key\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"category\">\n          {{ 'Admin.Products.Category' | transloco }}\n          <p-sortIcon field=\"category\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"region\">\n          {{ 'Admin.Products.Region' | transloco }}\n          <p-sortIcon field=\"region\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"currency\">\n          {{ 'Admin.Products.Currency' | transloco }}\n          <p-sortIcon field=\"currency\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"price_per_unit\">\n          {{ 'Admin.Products.Price' | transloco }}\n          <p-sortIcon field=\"price_per_unit\"></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=\"billing_frequency\">\n          {{ 'Admin.Products.Billing' | transloco }}\n          <p-sortIcon field=\"billing_frequency\"></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-item>\n      <tr>\n        <td data-head=\"Name\">{{ item.name }}</td>\n        <td data-head=\"Stripe Plan\">{{ item.stripe_plan_id }}</td>\n        <td data-head=\"Permission Key\">{{ item.permission_key }}</td>\n        <td data-head=\"Feature Key\">{{ item.feature_key }}</td>\n        <td data-head=\"Product Key\">{{ item.product_key }}</td>\n        <td data-head=\"Category\">\n          <span [appDynamicBadge]=\"{ itemsArray: categories, item: item.category }\"\n            color=\"warning\"\n            class=\"badge\">{{ item.category }}</span>\n        </td>\n        <td data-head=\"Region\">\n          <span [appDynamicBadge]=\"{ itemsArray: regions, item: item.region }\"\n            color=\"cyan\"\n            class=\"badge\">{{ item.region }}</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\">{{ item.price_per_unit }}</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=\"Billing\">\n          <span class=\"badge\"\n            [appDynamicBadge]=\"{\n                            itemsArray: billingFrequency,\n                            item: item?.billing_frequency\n                        }\"\n            color=\"blue-grey\">{{ item.billing_frequency }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline width-max-content\">\n            <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n              [routerLink]=\"[routers.productDetails + item.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Product.Delete'\"\n              (keydown.enter)=\"onDelete(item)\"\n              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Users List\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n              [routerLink]=\"[routers.productsUserList + item.id]\">\n              <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Duplicate The Product\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-sm-3\"\n              [routerLink]=\"[routers.productDetails + 'add']\"\n              [queryParams]=\"{ duplicate_product_id: item.id }\">\n              <i class=\"fa fa-clone edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Feedback Questions\" tooltipPosition=\"top\"\n              appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.feedbackQuestions]\"\n              [queryParams]=\"{ product_id: item.id }\">\n              <i class=\"fa fa-comments edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (totalRecords !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n  }\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Products.NoDataMessage' | transloco\"> </pw-no-data>\n}\n<!-- password validation modal for delete product -->\n<pw-password-validation #passwordValidationModalForProductDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteProduct($event)\">\n</pw-password-validation>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.table-responsive td{padding:6px 10px!important;line-height:1.4;vertical-align:middle;word-break:break-word}.table-responsive th{vertical-align:bottom}.table-responsive td[data-head=Name]{font-weight:600;color:#1a1d21}.table-responsive td[data-head=\"Stripe Plan\"],.table-responsive td[data-head=\"Permission Key\"],.table-responsive td[data-head=\"Feature Key\"],.table-responsive td[data-head=\"Product Key\"]{color:#5a6473;font-variant-numeric:tabular-nums}.table-responsive td[data-head=Price]{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(9){text-align:right}.table-responsive .badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;letter-spacing:.01em}.table-responsive .badge[class*=bg-success]{background-color:#e6f4ec!important;color:#0f6b3a!important}.table-responsive .badge[class*=bg-danger]{background-color:#fbeae8!important;color:#c0392b!important}.table-responsive .badge.bg-warning{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-1{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-2{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-3{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-4{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-5{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-6{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-7{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-8{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-9{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-10{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-11{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-12{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-13{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-14{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-15{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-16{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-17{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-18{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-19{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-20{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-21{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-22{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-23{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-24{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-cyan{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-1{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-2{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-3{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-4{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-5{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-6{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-7{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-8{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-9{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-10{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-11{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-12{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-13{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-14{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-15{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-16{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-17{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-18{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-19{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-20{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-21{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-22{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-23{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-24{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-blue-grey{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-1{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-2{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-3{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-4{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-5{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-6{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-7{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-8{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-9{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-10{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-11{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-12{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-13{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-14{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-15{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-16{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-17{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-18{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-19{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-20{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-21{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-22{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-23{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-24{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-cyan-default{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-default-change{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-success:before,.table-responsive .badge.bg-danger:before{content:\"\";display:inline-block;box-sizing:border-box;width:7px;height:7px;margin-right:6px;border-radius:50%;vertical-align:middle}.table-responsive .badge.bg-success:before{background-color:currentColor}.table-responsive .badge.bg-danger:before{background-color:transparent;border:1.5px solid currentColor}.width-max-content{width:max-content}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProductsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-products-list', standalone: false, template: "<div class=\"col-xs-12 text-end d-flex justify-content-between align-items-center\">\n  <h2 class=\"card-title p-0 float-start\">Products</h2>\n  <button *rbacAllow=\"'Pages.Admin.Product.Create'\"\n    class=\"btn btn-sm btn-outline-primary\"\n    [routerLink]=\"[routers.productDetails + 'add']\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Setup New Product\n  </button>\n</div>\n@if (loading) {\n  <div class=\"w-100 text-center mt-3\">\n    <p-progressSpinner> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n  [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <p-table #dt\n    [value]=\"products\"\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-12 col-sm-4\">\n          <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"products-list-feature-keys\" placeholder=\"Filter by feature keys\"\n            [options]=\"featureKeysList\"\n            (onChange)=\"onSearchOptionChange($event)\"\n            [showHeader]=\"true\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end\">\n          <label for=\"products-list-search\" class=\"visually-hidden\">Search Product</label>\n          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"products-list-search\"\n              name=\"products-list-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search products...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr class=\"head\">\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=\"stripe_plan_id\">\n          {{ 'Admin.Products.StripePlan' | transloco }}\n          <p-sortIcon field=\"stripe_plan_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"permission_key\">\n          {{ 'Admin.Products.PermissionKey' | transloco }}\n          <p-sortIcon field=\"permission_key\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"feature_key\">\n          {{ 'Admin.Products.FeatureKey' | transloco }}\n          <p-sortIcon field=\"feature_key\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"product_key\">\n          {{ 'Admin.Products.ProductKey' | transloco }}\n          <p-sortIcon field=\"product_key\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"category\">\n          {{ 'Admin.Products.Category' | transloco }}\n          <p-sortIcon field=\"category\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"region\">\n          {{ 'Admin.Products.Region' | transloco }}\n          <p-sortIcon field=\"region\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"currency\">\n          {{ 'Admin.Products.Currency' | transloco }}\n          <p-sortIcon field=\"currency\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"price_per_unit\">\n          {{ 'Admin.Products.Price' | transloco }}\n          <p-sortIcon field=\"price_per_unit\"></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=\"billing_frequency\">\n          {{ 'Admin.Products.Billing' | transloco }}\n          <p-sortIcon field=\"billing_frequency\"></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-item>\n      <tr>\n        <td data-head=\"Name\">{{ item.name }}</td>\n        <td data-head=\"Stripe Plan\">{{ item.stripe_plan_id }}</td>\n        <td data-head=\"Permission Key\">{{ item.permission_key }}</td>\n        <td data-head=\"Feature Key\">{{ item.feature_key }}</td>\n        <td data-head=\"Product Key\">{{ item.product_key }}</td>\n        <td data-head=\"Category\">\n          <span [appDynamicBadge]=\"{ itemsArray: categories, item: item.category }\"\n            color=\"warning\"\n            class=\"badge\">{{ item.category }}</span>\n        </td>\n        <td data-head=\"Region\">\n          <span [appDynamicBadge]=\"{ itemsArray: regions, item: item.region }\"\n            color=\"cyan\"\n            class=\"badge\">{{ item.region }}</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\">{{ item.price_per_unit }}</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=\"Billing\">\n          <span class=\"badge\"\n            [appDynamicBadge]=\"{\n                            itemsArray: billingFrequency,\n                            item: item?.billing_frequency\n                        }\"\n            color=\"blue-grey\">{{ item.billing_frequency }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline width-max-content\">\n            <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n              [routerLink]=\"[routers.productDetails + item.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Product.Delete'\"\n              (keydown.enter)=\"onDelete(item)\"\n              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Users List\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n              [routerLink]=\"[routers.productsUserList + item.id]\">\n              <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Duplicate The Product\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-sm-3\"\n              [routerLink]=\"[routers.productDetails + 'add']\"\n              [queryParams]=\"{ duplicate_product_id: item.id }\">\n              <i class=\"fa fa-clone edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Feedback Questions\" tooltipPosition=\"top\"\n              appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.feedbackQuestions]\"\n              [queryParams]=\"{ product_id: item.id }\">\n              <i class=\"fa fa-comments edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (totalRecords !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n  }\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Products.NoDataMessage' | transloco\"> </pw-no-data>\n}\n<!-- password validation modal for delete product -->\n<pw-password-validation #passwordValidationModalForProductDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteProduct($event)\">\n</pw-password-validation>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.table-responsive td{padding:6px 10px!important;line-height:1.4;vertical-align:middle;word-break:break-word}.table-responsive th{vertical-align:bottom}.table-responsive td[data-head=Name]{font-weight:600;color:#1a1d21}.table-responsive td[data-head=\"Stripe Plan\"],.table-responsive td[data-head=\"Permission Key\"],.table-responsive td[data-head=\"Feature Key\"],.table-responsive td[data-head=\"Product Key\"]{color:#5a6473;font-variant-numeric:tabular-nums}.table-responsive td[data-head=Price]{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(9){text-align:right}.table-responsive .badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;letter-spacing:.01em}.table-responsive .badge[class*=bg-success]{background-color:#e6f4ec!important;color:#0f6b3a!important}.table-responsive .badge[class*=bg-danger]{background-color:#fbeae8!important;color:#c0392b!important}.table-responsive .badge.bg-warning{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-1{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-2{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-3{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-4{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-5{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-6{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-7{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-8{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-9{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-10{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-11{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-12{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-13{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-14{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-15{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-16{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-17{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-18{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-19{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-20{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-21{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-22{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-23{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-24{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-cyan{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-1{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-2{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-3{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-4{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-5{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-6{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-7{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-8{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-9{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-10{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-11{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-12{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-13{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-14{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-15{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-16{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-17{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-18{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-19{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-20{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-21{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-22{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-23{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-24{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-blue-grey{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-1{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-2{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-3{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-4{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-5{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-6{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-7{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-8{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-9{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-10{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-11{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-12{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-13{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-14{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-15{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-16{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-17{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-18{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-19{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-20{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-21{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-22{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-23{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-24{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-cyan-default{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-default-change{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-success:before,.table-responsive .badge.bg-danger:before{content:\"\";display:inline-block;box-sizing:border-box;width:7px;height:7px;margin-right:6px;border-radius:50%;vertical-align:middle}.table-responsive .badge.bg-success:before{background-color:currentColor}.table-responsive .badge.bg-danger:before{background-color:transparent;border:1.5px solid currentColor}.width-max-content{width:max-content}\n"] }]
+            args: [{ selector: 'pw-admin-products-list', standalone: false, template: "<div class=\"col-xs-12 text-end d-flex justify-content-between align-items-center\">\n  <h2 class=\"card-title p-0 float-start\">Products</h2>\n  <button *rbacAllow=\"'Pages.Admin.Product.Create'\"\n    class=\"btn btn-sm btn-outline-primary\"\n    [routerLink]=\"[routers.productDetails + 'add']\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Setup New Product\n  </button>\n</div>\n@if (loading) {\n  <div class=\"w-100 text-center mt-3\">\n    <p-progressSpinner> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n  [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <p-table #dt\n    [value]=\"products\"\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-12 col-sm-4\">\n          <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"products-list-feature-keys\" placeholder=\"Filter by feature keys\"\n            [options]=\"featureKeysList\"\n            (onChange)=\"onSearchOptionChange($event)\"\n            [showHeader]=\"true\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end\">\n          <label for=\"products-list-search\" class=\"visually-hidden\">Search Product</label>\n          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"products-list-search\"\n              name=\"products-list-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search products...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr class=\"head\">\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=\"stripe_plan_id\">\n          {{ 'Admin.Products.StripePlan' | transloco }}\n          <p-sortIcon field=\"stripe_plan_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"permission_key\">\n          {{ 'Admin.Products.PermissionKey' | transloco }}\n          <p-sortIcon field=\"permission_key\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"feature_key\">\n          {{ 'Admin.Products.FeatureKey' | transloco }}\n          <p-sortIcon field=\"feature_key\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"product_key\">\n          {{ 'Admin.Products.ProductKey' | transloco }}\n          <p-sortIcon field=\"product_key\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"category\">\n          {{ 'Admin.Products.Category' | transloco }}\n          <p-sortIcon field=\"category\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"region\">\n          {{ 'Admin.Products.Region' | transloco }}\n          <p-sortIcon field=\"region\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"currency\">\n          {{ 'Admin.Products.Currency' | transloco }}\n          <p-sortIcon field=\"currency\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"price_per_unit\">\n          {{ 'Admin.Products.Price' | transloco }}\n          <p-sortIcon field=\"price_per_unit\"></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=\"billing_frequency\">\n          {{ 'Admin.Products.Billing' | transloco }}\n          <p-sortIcon field=\"billing_frequency\"></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-item>\n      <tr>\n        <td data-head=\"Name\">{{ item.name }}</td>\n        <td data-head=\"Stripe Plan\">{{ item.stripe_plan_id }}</td>\n        <td data-head=\"Permission Key\">{{ item.permission_key }}</td>\n        <td data-head=\"Feature Key\">{{ item.feature_key }}</td>\n        <td data-head=\"Product Key\">{{ item.product_key }}</td>\n        <td data-head=\"Category\">\n          <span [appDynamicBadge]=\"{ itemsArray: categories, item: item.category }\"\n            color=\"warning\"\n            class=\"badge\">{{ item.category }}</span>\n        </td>\n        <td data-head=\"Region\">\n          <span [appDynamicBadge]=\"{ itemsArray: regions, item: item.region }\"\n            color=\"cyan\"\n            class=\"badge\">{{ item.region }}</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\">{{ item.price_per_unit }}</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=\"Billing\">\n          <span class=\"badge\"\n            [appDynamicBadge]=\"{\n                            itemsArray: billingFrequency,\n                            item: item?.billing_frequency\n                        }\"\n            color=\"blue-grey\">{{ item.billing_frequency }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline width-max-content\">\n            <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n              [routerLink]=\"[routers.productDetails + item.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Product.Delete'\"\n              (keydown.enter)=\"onDelete(item)\"\n              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Users List\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n              [routerLink]=\"[routers.productsUserList + item.id]\">\n              <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Duplicate The Product\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-sm-3\"\n              [routerLink]=\"[routers.productDetails + 'add']\"\n              [queryParams]=\"{ duplicate_product_id: item.id }\">\n              <i class=\"fa fa-clone edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Feedback Questions\" tooltipPosition=\"top\"\n              appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.feedbackQuestions]\"\n              [queryParams]=\"{ product_id: item.id }\">\n              <i class=\"fa fa-comments edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (totalRecords !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n  }\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Products.NoDataMessage' | transloco\"> </pw-no-data>\n}\n<!-- password validation modal for delete product -->\n<pw-password-validation #passwordValidationModalForProductDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteProduct($event)\">\n</pw-password-validation>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.table-responsive td{padding:6px 10px!important;line-height:1.4;vertical-align:middle;word-break:break-word}.table-responsive th{vertical-align:bottom}.table-responsive td[data-head=Name]{font-weight:600;color:#1a1d21}.table-responsive td[data-head=\"Stripe Plan\"],.table-responsive td[data-head=\"Permission Key\"],.table-responsive td[data-head=\"Feature Key\"],.table-responsive td[data-head=\"Product Key\"]{color:#5a6473;font-variant-numeric:tabular-nums}.table-responsive td[data-head=Price]{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(9){text-align:right}.table-responsive .badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;letter-spacing:.01em}.table-responsive .badge[class*=bg-success]{background-color:#e6f4ec!important;color:#0f6b3a!important}.table-responsive .badge[class*=bg-danger]{background-color:#fbeae8!important;color:#c0392b!important}.table-responsive .badge.bg-warning{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-1{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-2{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-3{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-4{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-5{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-6{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-7{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-8{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-9{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-10{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-11{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-12{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-13{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-14{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-15{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-16{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-17{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-18{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-19{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-20{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-21{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-22{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-23{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-24{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-cyan{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-1{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-2{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-3{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-4{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-5{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-6{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-7{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-8{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-9{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-10{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-11{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-12{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-13{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-14{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-15{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-16{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-17{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-18{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-19{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-20{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-21{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-22{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-23{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-24{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-blue-grey{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-1{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-2{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-3{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-4{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-5{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-6{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-7{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-8{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-9{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-10{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-11{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-12{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-13{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-14{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-15{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-16{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-17{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-18{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-19{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-20{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-21{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-22{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-23{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-24{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-cyan-default{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-default-change{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-success:before,.table-responsive .badge.bg-danger:before{content:\"\";display:inline-block;box-sizing:border-box;width:7px;height:7px;margin-right:6px;border-radius:50%;vertical-align:middle}.table-responsive .badge.bg-success:before{background-color:currentColor}.table-responsive .badge.bg-danger:before{background-color:transparent;border:1.5px solid currentColor}.width-max-content{width:max-content}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ProductService }, { type: i1$1.AuthService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { passwordValidationModalForProductDelete: [{
                 type: ViewChild,
                 args: ['passwordValidationModalForProductDelete', { static: false }]
@@ -6108,11 +6127,11 @@ class ProductsTabComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProductsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ProductsTabComponent, isStandalone: false, selector: "pw-products-tabs", ngImport: i0, template: `<pw-tabs [items]="items"></pw-tabs>`, isInline: true, styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.table-title{border-bottom:4px solid rgb(23,105,225);padding:0}.table-title .m-subheader__title{background-color:#1769e1;padding:7px 25px}.table-title .m-subheader__title span{color:#fff;font-size:16px;text-transform:uppercase}\n"], dependencies: [{ kind: "component", type: i3$2.PwTabsComponent, selector: "pw-tabs", inputs: ["items", "withSubscription"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ProductsTabComponent, isStandalone: false, selector: "pw-products-tabs", ngImport: i0, template: `<pw-tabs [items]="items"></pw-tabs>`, isInline: true, styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.table-title{border-bottom:4px solid rgb(23,105,225);padding:0}.table-title .m-subheader__title{background-color:#1769e1;padding:7px 25px}.table-title .m-subheader__title span{color:#fff;font-size:16px;text-transform:uppercase}\n"], dependencies: [{ kind: "component", type: i3$2.PwTabsComponent, selector: "pw-tabs", inputs: ["items", "withSubscription"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProductsTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-products-tabs', template: `<pw-tabs [items]="items"></pw-tabs>`, standalone: false, styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.table-title{border-bottom:4px solid rgb(23,105,225);padding:0}.table-title .m-subheader__title{background-color:#1769e1;padding:7px 25px}.table-title .m-subheader__title span{color:#fff;font-size:16px;text-transform:uppercase}\n"] }]
+            args: [{ selector: 'pw-products-tabs', template: `<pw-tabs [items]="items"></pw-tabs>`, standalone: false, styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.table-title{border-bottom:4px solid rgb(23,105,225);padding:0}.table-title .m-subheader__title{background-color:#1769e1;padding:7px 25px}.table-title .m-subheader__title span{color:#fff;font-size:16px;text-transform:uppercase}\n"] }]
         }], ctorParameters: () => [] });
 
 class UsersListForProductComponent extends AppBaseComponent {
@@ -8435,11 +8454,11 @@ class InviteUsersComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InviteUsersComponent, deps: [{ token: i3$1.UntypedFormBuilder }, { token: i1.AdminService }, { token: i1$1.ProductService }, { token: i0.Injector }, { token: i1$1.CommonService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InviteUsersComponent, isStandalone: false, selector: "pw-invite-users", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard user-details\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">{{ 'Admin.Subscriptions.InviteNewUser' | transloco }}</h3>\n        <p>{{ 'Admin.Subscriptions.InviteNewUserDescription' | transloco }}</p>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n\n          <h3>{{ 'Admin.Subscriptions.Section.UserDetails' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n                name=\"first_name\"\n                controlId=\"invite-first_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-first_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteFirstName' | transloco\"\n                  formControlName=\"first_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('first_name').touched && form.get('first_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.LastName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n                name=\"last_name\"\n                controlId=\"invite-last_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-last_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteLastName' | transloco\"\n                  formControlName=\"last_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Email' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n                name=\"email\"\n                controlId=\"invite-email\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-email\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Label.EmailPlaceholder' | transloco\"\n                  formControlName=\"email\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('email').touched && form.get('email').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.ProductSeats' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Product' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n                name=\"product_id\"\n                controlId=\"invite-product_id\"\n                [useAriaLabelledbyOnly]=\"true\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n                <p-autoComplete appendTo=\"body\" #refProduct\n                  [suggestions]=\"filteredProducts\"\n                  [ariaLabelledBy]=\"'invite-product_id-label'\"\n                  [ariaLabel]=\"'Label.Product' | transloco\"\n                  formControlName=\"product_id\"\n                  dataKey=\"id\"\n                  optionLabel=\"label\"\n                  [dropdown]=\"true\"\n                  [delay]=\"1000\"\n                  [type]=\"'search'\"\n                  (completeMethod)=\"searchProduct($event)\"\n                  (onSelect)=\"onProductChange($event)\"\n                  (onClear)=\"onProductClear($event)\"\n                  styleClass=\"w-100\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.SearchProducts' | transloco\"\n                  [inputStyleClass]=\"form.get('product_id').touched && form.get('product_id').invalid ? 'is-invalid' : ''\"\n                  [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n                name=\"units\"\n                controlId=\"invite-units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-units\"\n                  class=\"form-control\"\n                  formControlName=\"units\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('units').touched && form.get('units').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n                [showTooltip]=\"true\"\n                name=\"min_units\"\n                controlId=\"invite-min_units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-min_units\"\n                  min=\"0\"\n                  [max]=\"form.get('units').value\"\n                  class=\"form-control\"\n                  formControlName=\"min_units\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.Organization' | transloco }}</h3>\n          <div class=\"row\">\n            @if (organizationIndustries$ | async; as industries) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                  name=\"organization_industry_id\"\n                  controlId=\"invite-organization_industry_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_industry_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n                    [options]=\"industries['organization_industries']\"\n                    formControlName=\"organization_industry_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationSizes$ | async; as sizes) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n                  name=\"organization_size_id\"\n                  controlId=\"invite-organization_size_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_size_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationSize' | transloco\"\n                    [options]=\"sizes['organization_sizes']\"\n                    formControlName=\"organization_size_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationTypes$ | async; as types) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n                  name=\"organization_type_id\"\n                  controlId=\"invite-organization_type_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_type_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n                    [options]=\"types['organization_types']\"\n                    formControlName=\"organization_type_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName' | transloco\"\n                name=\"name\"\n                controlId=\"invite-organization-name\">\n                <input type=\"text\"\n                  id=\"invite-organization-name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n                  formControlName=\"name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('name').touched && form.get('name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <div class=\"row\">\n            <div class=\"col-12 text-end\">\n              <button type=\"button\"\n                class=\"btn btn-secondary me-3\"\n                (click)=\"form.reset(); totalRecordsUnFiltered = 0; back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                [disabled]=\"buttonBusy\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Invite' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"], dependencies: [{ kind: "component", type: i4$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "component", type: i3$2.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i7.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InviteUsersComponent, isStandalone: false, selector: "pw-invite-users", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard user-details\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">{{ 'Admin.Subscriptions.InviteNewUser' | transloco }}</h3>\n        <p>{{ 'Admin.Subscriptions.InviteNewUserDescription' | transloco }}</p>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n\n          <h3>{{ 'Admin.Subscriptions.Section.UserDetails' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n                name=\"first_name\"\n                controlId=\"invite-first_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-first_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteFirstName' | transloco\"\n                  formControlName=\"first_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('first_name').touched && form.get('first_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.LastName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n                name=\"last_name\"\n                controlId=\"invite-last_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-last_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteLastName' | transloco\"\n                  formControlName=\"last_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Email' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n                name=\"email\"\n                controlId=\"invite-email\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-email\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Label.EmailPlaceholder' | transloco\"\n                  formControlName=\"email\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('email').touched && form.get('email').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.ProductSeats' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Product' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n                name=\"product_id\"\n                controlId=\"invite-product_id\"\n                [useAriaLabelledbyOnly]=\"true\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n                <p-autoComplete appendTo=\"body\" #refProduct\n                  [suggestions]=\"filteredProducts\"\n                  [ariaLabelledBy]=\"'invite-product_id-label'\"\n                  [ariaLabel]=\"'Label.Product' | transloco\"\n                  formControlName=\"product_id\"\n                  dataKey=\"id\"\n                  optionLabel=\"label\"\n                  [dropdown]=\"true\"\n                  [delay]=\"1000\"\n                  [type]=\"'search'\"\n                  (completeMethod)=\"searchProduct($event)\"\n                  (onSelect)=\"onProductChange($event)\"\n                  (onClear)=\"onProductClear($event)\"\n                  styleClass=\"w-100\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.SearchProducts' | transloco\"\n                  [inputStyleClass]=\"form.get('product_id').touched && form.get('product_id').invalid ? 'is-invalid' : ''\"\n                  [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n                name=\"units\"\n                controlId=\"invite-units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-units\"\n                  class=\"form-control\"\n                  formControlName=\"units\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('units').touched && form.get('units').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n                [showTooltip]=\"true\"\n                name=\"min_units\"\n                controlId=\"invite-min_units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-min_units\"\n                  min=\"0\"\n                  [max]=\"form.get('units').value\"\n                  class=\"form-control\"\n                  formControlName=\"min_units\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.Organization' | transloco }}</h3>\n          <div class=\"row\">\n            @if (organizationIndustries$ | async; as industries) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                  name=\"organization_industry_id\"\n                  controlId=\"invite-organization_industry_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_industry_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n                    [options]=\"industries['organization_industries']\"\n                    formControlName=\"organization_industry_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationSizes$ | async; as sizes) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n                  name=\"organization_size_id\"\n                  controlId=\"invite-organization_size_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_size_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationSize' | transloco\"\n                    [options]=\"sizes['organization_sizes']\"\n                    formControlName=\"organization_size_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationTypes$ | async; as types) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n                  name=\"organization_type_id\"\n                  controlId=\"invite-organization_type_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_type_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n                    [options]=\"types['organization_types']\"\n                    formControlName=\"organization_type_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName' | transloco\"\n                name=\"name\"\n                controlId=\"invite-organization-name\">\n                <input type=\"text\"\n                  id=\"invite-organization-name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n                  formControlName=\"name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('name').touched && form.get('name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <div class=\"row\">\n            <div class=\"col-12 text-end\">\n              <button type=\"button\"\n                class=\"btn btn-secondary me-3\"\n                (click)=\"form.reset(); totalRecordsUnFiltered = 0; back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                [disabled]=\"buttonBusy\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Invite' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"], dependencies: [{ kind: "component", type: i4$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "component", type: i3$2.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i7.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InviteUsersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-invite-users', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard user-details\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">{{ 'Admin.Subscriptions.InviteNewUser' | transloco }}</h3>\n        <p>{{ 'Admin.Subscriptions.InviteNewUserDescription' | transloco }}</p>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n\n          <h3>{{ 'Admin.Subscriptions.Section.UserDetails' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n                name=\"first_name\"\n                controlId=\"invite-first_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-first_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteFirstName' | transloco\"\n                  formControlName=\"first_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('first_name').touched && form.get('first_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.LastName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n                name=\"last_name\"\n                controlId=\"invite-last_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-last_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteLastName' | transloco\"\n                  formControlName=\"last_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Email' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n                name=\"email\"\n                controlId=\"invite-email\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-email\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Label.EmailPlaceholder' | transloco\"\n                  formControlName=\"email\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('email').touched && form.get('email').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.ProductSeats' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Product' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n                name=\"product_id\"\n                controlId=\"invite-product_id\"\n                [useAriaLabelledbyOnly]=\"true\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n                <p-autoComplete appendTo=\"body\" #refProduct\n                  [suggestions]=\"filteredProducts\"\n                  [ariaLabelledBy]=\"'invite-product_id-label'\"\n                  [ariaLabel]=\"'Label.Product' | transloco\"\n                  formControlName=\"product_id\"\n                  dataKey=\"id\"\n                  optionLabel=\"label\"\n                  [dropdown]=\"true\"\n                  [delay]=\"1000\"\n                  [type]=\"'search'\"\n                  (completeMethod)=\"searchProduct($event)\"\n                  (onSelect)=\"onProductChange($event)\"\n                  (onClear)=\"onProductClear($event)\"\n                  styleClass=\"w-100\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.SearchProducts' | transloco\"\n                  [inputStyleClass]=\"form.get('product_id').touched && form.get('product_id').invalid ? 'is-invalid' : ''\"\n                  [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n                name=\"units\"\n                controlId=\"invite-units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-units\"\n                  class=\"form-control\"\n                  formControlName=\"units\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('units').touched && form.get('units').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n                [showTooltip]=\"true\"\n                name=\"min_units\"\n                controlId=\"invite-min_units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-min_units\"\n                  min=\"0\"\n                  [max]=\"form.get('units').value\"\n                  class=\"form-control\"\n                  formControlName=\"min_units\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.Organization' | transloco }}</h3>\n          <div class=\"row\">\n            @if (organizationIndustries$ | async; as industries) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                  name=\"organization_industry_id\"\n                  controlId=\"invite-organization_industry_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_industry_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n                    [options]=\"industries['organization_industries']\"\n                    formControlName=\"organization_industry_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationSizes$ | async; as sizes) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n                  name=\"organization_size_id\"\n                  controlId=\"invite-organization_size_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_size_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationSize' | transloco\"\n                    [options]=\"sizes['organization_sizes']\"\n                    formControlName=\"organization_size_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationTypes$ | async; as types) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n                  name=\"organization_type_id\"\n                  controlId=\"invite-organization_type_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_type_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n                    [options]=\"types['organization_types']\"\n                    formControlName=\"organization_type_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName' | transloco\"\n                name=\"name\"\n                controlId=\"invite-organization-name\">\n                <input type=\"text\"\n                  id=\"invite-organization-name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n                  formControlName=\"name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('name').touched && form.get('name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <div class=\"row\">\n            <div class=\"col-12 text-end\">\n              <button type=\"button\"\n                class=\"btn btn-secondary me-3\"\n                (click)=\"form.reset(); totalRecordsUnFiltered = 0; back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                [disabled]=\"buttonBusy\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Invite' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"] }]
+            args: [{ selector: 'pw-invite-users', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard user-details\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">{{ 'Admin.Subscriptions.InviteNewUser' | transloco }}</h3>\n        <p>{{ 'Admin.Subscriptions.InviteNewUserDescription' | transloco }}</p>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n\n          <h3>{{ 'Admin.Subscriptions.Section.UserDetails' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n                name=\"first_name\"\n                controlId=\"invite-first_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-first_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteFirstName' | transloco\"\n                  formControlName=\"first_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('first_name').touched && form.get('first_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.LastName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n                name=\"last_name\"\n                controlId=\"invite-last_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-last_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteLastName' | transloco\"\n                  formControlName=\"last_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Email' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n                name=\"email\"\n                controlId=\"invite-email\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-email\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Label.EmailPlaceholder' | transloco\"\n                  formControlName=\"email\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('email').touched && form.get('email').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.ProductSeats' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Product' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n                name=\"product_id\"\n                controlId=\"invite-product_id\"\n                [useAriaLabelledbyOnly]=\"true\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n                <p-autoComplete appendTo=\"body\" #refProduct\n                  [suggestions]=\"filteredProducts\"\n                  [ariaLabelledBy]=\"'invite-product_id-label'\"\n                  [ariaLabel]=\"'Label.Product' | transloco\"\n                  formControlName=\"product_id\"\n                  dataKey=\"id\"\n                  optionLabel=\"label\"\n                  [dropdown]=\"true\"\n                  [delay]=\"1000\"\n                  [type]=\"'search'\"\n                  (completeMethod)=\"searchProduct($event)\"\n                  (onSelect)=\"onProductChange($event)\"\n                  (onClear)=\"onProductClear($event)\"\n                  styleClass=\"w-100\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.SearchProducts' | transloco\"\n                  [inputStyleClass]=\"form.get('product_id').touched && form.get('product_id').invalid ? 'is-invalid' : ''\"\n                  [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n                name=\"units\"\n                controlId=\"invite-units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-units\"\n                  class=\"form-control\"\n                  formControlName=\"units\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('units').touched && form.get('units').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n                [showTooltip]=\"true\"\n                name=\"min_units\"\n                controlId=\"invite-min_units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-min_units\"\n                  min=\"0\"\n                  [max]=\"form.get('units').value\"\n                  class=\"form-control\"\n                  formControlName=\"min_units\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.Organization' | transloco }}</h3>\n          <div class=\"row\">\n            @if (organizationIndustries$ | async; as industries) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                  name=\"organization_industry_id\"\n                  controlId=\"invite-organization_industry_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_industry_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n                    [options]=\"industries['organization_industries']\"\n                    formControlName=\"organization_industry_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationSizes$ | async; as sizes) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n                  name=\"organization_size_id\"\n                  controlId=\"invite-organization_size_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_size_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationSize' | transloco\"\n                    [options]=\"sizes['organization_sizes']\"\n                    formControlName=\"organization_size_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationTypes$ | async; as types) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n                  name=\"organization_type_id\"\n                  controlId=\"invite-organization_type_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_type_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n                    [options]=\"types['organization_types']\"\n                    formControlName=\"organization_type_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName' | transloco\"\n                name=\"name\"\n                controlId=\"invite-organization-name\">\n                <input type=\"text\"\n                  id=\"invite-organization-name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n                  formControlName=\"name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('name').touched && form.get('name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <div class=\"row\">\n            <div class=\"col-12 text-end\">\n              <button type=\"button\"\n                class=\"btn btn-secondary me-3\"\n                (click)=\"form.reset(); totalRecordsUnFiltered = 0; back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                [disabled]=\"buttonBusy\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Invite' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"] }]
         }], ctorParameters: () => [{ type: i3$1.UntypedFormBuilder }, { type: i1.AdminService }, { type: i1$1.ProductService }, { type: i0.Injector }, { type: i1$1.CommonService }, { type: i0.ChangeDetectorRef }], propDecorators: { refProduct: [{
                 type: ViewChild,
                 args: ['refProduct']
@@ -8762,11 +8781,11 @@ class SubscriptionsListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SubscriptionsListComponent, deps: [{ token: i1$1.ProductService }, { token: i1.AdminService }, { token: i3$1.UntypedFormBuilder }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$1.CommonService }, { token: i3$2.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SubscriptionsListComponent, isStandalone: false, selector: "pw-subscriptions-list", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }, { propertyName: "recoverSubscriptionPasswordModal", first: true, predicate: ["recoverSubscriptionPasswordModal"], 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 User to a Trial\n    </a>\n  </div>\n</div>\n<div class=\"p-2 mt-2\">\n  <div class=\"w-100 text-center\">\n    @if (!isLoaded) {\n      <p-progressSpinner> </p-progressSpinner>\n    }\n  </div>\n  <div class=\"primeng-datatable-container actions-collapsed 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        @if (subscriptionInsights) {\n          <div class=\"row mb-4\">\n            @for (temp of objectKeys(subscriptionInsights); track temp) {\n              <div class=\"col-12 col-lg-3 summary\">\n                <div class=\"card\">\n                  <div class=\"card-body\">\n                    @for (item of subscriptionInsights[temp]; track item) {\n                      @let k = item | kpiInsight;\n                      <div class=\"kpi\">\n                        <p class=\"kpi-label\">{{ k.name }}@if (item?.info) {<span [pTooltip]=\"item?.info\" tooltipPosition=\"top\" appendTo=\"body\"><i class=\"far fa-info-circle text-muted\"></i></span>}</p>\n                        <div class=\"kpi-value\">{{ k.primary }}</div>\n                        @if (k.secondary) {<div class=\"kpi-comp\">{{ k.comp }} <b>{{ k.secondary }}</b></div>}\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"search-filter\">\n          <div class=\"col-12 col-sm-4\">\n            <p-multiSelect inputId=\"subscriptions-list-feature-keys\"\n              styleClass=\"pw-filter-select\"\n              placeholder=\"Filter by feature keys\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              [maxSelectedLabels]=\"2\"\n              selectedItemsLabel=\"{0} feature keys selected\"\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            <p-select styleClass=\"pw-filter-select\"\n              inputId=\"subscriptions-list-status\"\n              [options]=\"subscriptionStatus\"\n              [placeholder]=\"'Filter by status'\"\n              (onChange)=\"filterByStatus($event.value)\"\n              [(ngModel)]=\"status\"\n              appendTo=\"body\">\n            </p-select>\n          </div>\n          <div class=\"text-end\">\n            <label for=\"subscriptions-list-search\" class=\"visually-hidden\">Search Subscription</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"subscriptions-list-search\"\n                name=\"subscriptions-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search subscriptions...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n            </p-iconfield>\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              appendTo=\"body\"\n            tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactName\" class=\"custom-break-word\">\n            <span [pTooltip]=\"item.contact_name\" tooltipPosition=\"top\" appendTo=\"body\">{{ item.contact_name | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactEmail\">\n            <span [pTooltip]=\"item.contact_email\" tooltipPosition=\"top\" appendTo=\"body\">{{ item.contact_email | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"Name\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.productName\"\n              appendTo=\"body\"\n            tooltipPosition=\"top\">{{ item.productName | textTruncate: 20 }}</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              @if (item?.discount && objectKeys(item?.discount)?.length) {\n                <i\n                  class=\"far fa-info-circle text-muted\"\n                  aria-hidden=\"true\"\n                  [pTooltip]=\"item?.discount | json\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\"\n                ></i>\n              }\n            </span>\n          </td>\n          <td data-head=\"Paid\">\n            @if (item?.unsubscribed_at) {\n              <span class=\"badge bg-warning d-inline-flex align-items-center\">\n                Unsub\n                @if (item?.reason_to_cancel) {\n                  <i class=\"far fa-info-circle ms-2 text-muted\"\n                    [pTooltip]=\"item.reason_to_cancel\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                  aria-hidden=\"true\"></i>\n                }\n              </span>\n            }\n            @if (!item?.unsubscribed_at) {\n              @if ((item?.stripe_customer_id || item?.external_payment) && item?.signed_up_at) {\n                <span class=\"badge bg-success\">Yes</span>\n              } @else {\n                <span class=\"badge bg-blue-grey\">No</span>\n              }\n            }\n            @if (item?.pause_collection && objectKeys(item?.pause_collection)?.length) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"item?.pause_collection | json\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\">\n                <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n              </span>\n            }\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>\n            <span>&nbsp;({{item?.created_at | sinceAgo:true}})</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            @if (item?.deleted_at) {\n              <span\n              class=\"badge bg-danger\">Yes</span>\n            }\n            @if (!item?.deleted_at) {\n              <span\n              class=\"badge bg-blue-grey\">No</span>\n            }\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Edit\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\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              @if (item.deleted) {\n                <li pTooltip=\"Reactivate subscription\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\"\n                  class=\"me-2 me-sm-3\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  (keydown.enter)=\"openRecoverSubscriptionModal(item)\"\n                  (click)=\"openRecoverSubscriptionModal(item)\">\n                  <i class=\"fa fa-trash delete-icon text-success\" aria-hidden=\"true\"></i>\n                </li>\n              } @else {\n                <li pTooltip=\"Delete\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\"\n                  class=\"me-2 me-sm-3\"\n                  *rbacAllow=\"'Pages.Admin.Subscription.Delete'\"\n                  (keydown.enter)=\"onDelete(item)\"\n                  (click)=\"onDelete(item)\">\n                  <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionMessage' | transloco\">\n  </pw-no-data>\n}\n<pw-password-validation\n  #recoverSubscriptionPasswordModal\n  (successEvent)=\"onRecoverConfirmed()\">\n</pw-password-validation>\n\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.table-responsive td{padding:6px 10px!important;font-size:12px!important;line-height:1.35;vertical-align:top;word-break:break-word}.table-responsive th{font-size:12px!important;vertical-align:bottom}.table-responsive td[data-head=Organization],.table-responsive td[data-head=Name],.table-responsive td[data-head=ContactName],.table-responsive td[data-head=ContactEmail],.table-responsive td[data-head=id],.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{white-space:nowrap}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(7),.table-responsive th:nth-child(11),.table-responsive th:nth-child(12){text-align:right}.table-responsive .badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;letter-spacing:.01em}.table-responsive .badge[class*=bg-success]{background-color:#e6f4ec!important;color:#0f6b3a!important}.table-responsive .badge[class*=bg-danger]{background-color:#fbeae8!important;color:#c0392b!important}.table-responsive .badge[class*=bg-warning]{background-color:#fbf1e3!important;color:#8a5a00!important}.table-responsive .badge.bg-blue-grey{background-color:#eef0f3!important;color:#5a6473!important}.table-responsive .badge.bg-blue-grey-1{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-2{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-3{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-4{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-5{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-6{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-7{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-8{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-9{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-10{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-11{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-12{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-13{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-14{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-15{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-16{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-17{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-18{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-19{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-20{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-21{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-22{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-23{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-24{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge[class*=bg-success]:before,.table-responsive .badge[class*=bg-danger]:before,.table-responsive .badge[class*=bg-warning]:before{content:\"\";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background-color:currentColor;vertical-align:middle}.table-responsive tbody tr:hover{background-color:#f5f7fa}.table-responsive td[data-head=Organization] span,.table-responsive td[data-head=Name] span{font-weight:600;color:#1a1d21}.table-responsive td[data-head=Expires] span~span{font-weight:600}.table-responsive .list-action .edit-icon{color:#5a6473}.table-responsive .list-action .delete-icon{color:#c0392b!important}.table-responsive .list-action .delete-icon.text-success{color:#0f6b3a!important}@media(max-width:1199.98px){.table-responsive td,.table-responsive th{white-space:nowrap;word-break:normal}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.summary{display:flex}.summary .card{width:100%;margin-top:0;margin-bottom:0;padding-bottom:0!important;border:1px solid #e2e5ea;border-radius:8px;background-color:#fff;transition:background-color .12s ease,border-color .12s ease}.summary .card:hover{background-color:#fafbfc;border-color:#cfd4dc}.summary .card-body{display:flex;flex-direction:column;padding:2px 0}.summary .kpi{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;padding:10px 16px}.summary .kpi+.kpi{border-top:1px solid #eef0f3}.summary .kpi-label{grid-column:1/-1;margin:0 0 4px;font-size:10px;font-weight:600;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:#5a6473}.summary .kpi-label .fa-info-circle{margin-left:4px;font-size:15px;color:#a8afbc}.summary .kpi-value{grid-column:1;font-size:18px;font-weight:700;line-height:1.1;color:#1a1d21;font-variant-numeric:tabular-nums}.summary .kpi-comp{grid-column:2;text-align:right;font-size:12px;color:#7c8696;font-variant-numeric:tabular-nums;white-space:normal}.summary .kpi-comp:before{content:\"\\b7\";margin-right:4px;color:#a8afbc}.summary .kpi-comp b{font-weight:600;color:#5a6473}@media(min-width:320px)and (max-width:720px){.primeng-datatable-container .search-filter{display:flex;flex-direction:column;gap:.5rem;justify-content:space-between}}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.SinceAgoPipe, name: "sinceAgo" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: KpiInsightPipe, name: "kpiInsight" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SubscriptionsListComponent, isStandalone: false, selector: "pw-subscriptions-list", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }, { propertyName: "recoverSubscriptionPasswordModal", first: true, predicate: ["recoverSubscriptionPasswordModal"], 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 User to a Trial\n    </a>\n  </div>\n</div>\n<div class=\"p-2 mt-2\">\n  <div class=\"w-100 text-center\">\n    @if (!isLoaded) {\n      <p-progressSpinner> </p-progressSpinner>\n    }\n  </div>\n  <div class=\"primeng-datatable-container actions-collapsed 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        @if (subscriptionInsights) {\n          <div class=\"row mb-4\">\n            @for (temp of objectKeys(subscriptionInsights); track temp) {\n              <div class=\"col-12 col-lg-3 summary\">\n                <div class=\"card\">\n                  <div class=\"card-body\">\n                    @for (item of subscriptionInsights[temp]; track item) {\n                      @let k = item | kpiInsight;\n                      <div class=\"kpi\">\n                        <p class=\"kpi-label\">{{ k.name }}@if (item?.info) {<span [pTooltip]=\"item?.info\" tooltipPosition=\"top\" appendTo=\"body\"><i class=\"far fa-info-circle text-muted\"></i></span>}</p>\n                        <div class=\"kpi-value\">{{ k.primary }}</div>\n                        @if (k.secondary) {<div class=\"kpi-comp\">{{ k.comp }} <b>{{ k.secondary }}</b></div>}\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"search-filter\">\n          <div class=\"col-12 col-sm-4\">\n            <p-multiSelect inputId=\"subscriptions-list-feature-keys\"\n              styleClass=\"pw-filter-select\"\n              placeholder=\"Filter by feature keys\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              [maxSelectedLabels]=\"2\"\n              selectedItemsLabel=\"{0} feature keys selected\"\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            <p-select styleClass=\"pw-filter-select\"\n              inputId=\"subscriptions-list-status\"\n              [options]=\"subscriptionStatus\"\n              [placeholder]=\"'Filter by status'\"\n              (onChange)=\"filterByStatus($event.value)\"\n              [(ngModel)]=\"status\"\n              appendTo=\"body\">\n            </p-select>\n          </div>\n          <div class=\"text-end\">\n            <label for=\"subscriptions-list-search\" class=\"visually-hidden\">Search Subscription</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"subscriptions-list-search\"\n                name=\"subscriptions-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search subscriptions...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n            </p-iconfield>\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              appendTo=\"body\"\n            tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactName\" class=\"custom-break-word\">\n            <span [pTooltip]=\"item.contact_name\" tooltipPosition=\"top\" appendTo=\"body\">{{ item.contact_name | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactEmail\">\n            <span [pTooltip]=\"item.contact_email\" tooltipPosition=\"top\" appendTo=\"body\">{{ item.contact_email | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"Name\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.productName\"\n              appendTo=\"body\"\n            tooltipPosition=\"top\">{{ item.productName | textTruncate: 20 }}</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              @if (item?.discount && objectKeys(item?.discount)?.length) {\n                <i\n                  class=\"far fa-info-circle text-muted\"\n                  aria-hidden=\"true\"\n                  [pTooltip]=\"item?.discount | json\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\"\n                ></i>\n              }\n            </span>\n          </td>\n          <td data-head=\"Paid\">\n            @if (item?.unsubscribed_at) {\n              <span class=\"badge bg-warning d-inline-flex align-items-center\">\n                Unsub\n                @if (item?.reason_to_cancel) {\n                  <i class=\"far fa-info-circle ms-2 text-muted\"\n                    [pTooltip]=\"item.reason_to_cancel\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                  aria-hidden=\"true\"></i>\n                }\n              </span>\n            }\n            @if (!item?.unsubscribed_at) {\n              @if ((item?.stripe_customer_id || item?.external_payment) && item?.signed_up_at) {\n                <span class=\"badge bg-success\">Yes</span>\n              } @else {\n                <span class=\"badge bg-blue-grey\">No</span>\n              }\n            }\n            @if (item?.pause_collection && objectKeys(item?.pause_collection)?.length) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"item?.pause_collection | json\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\">\n                <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n              </span>\n            }\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>\n            <span>&nbsp;({{item?.created_at | sinceAgo:true}})</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            @if (item?.deleted_at) {\n              <span\n              class=\"badge bg-danger\">Yes</span>\n            }\n            @if (!item?.deleted_at) {\n              <span\n              class=\"badge bg-blue-grey\">No</span>\n            }\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Edit\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\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              @if (item.deleted) {\n                <li pTooltip=\"Reactivate subscription\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\"\n                  class=\"me-2 me-sm-3\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  (keydown.enter)=\"openRecoverSubscriptionModal(item)\"\n                  (click)=\"openRecoverSubscriptionModal(item)\">\n                  <i class=\"fa fa-trash delete-icon text-success\" aria-hidden=\"true\"></i>\n                </li>\n              } @else {\n                <li pTooltip=\"Delete\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\"\n                  class=\"me-2 me-sm-3\"\n                  *rbacAllow=\"'Pages.Admin.Subscription.Delete'\"\n                  (keydown.enter)=\"onDelete(item)\"\n                  (click)=\"onDelete(item)\">\n                  <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionMessage' | transloco\">\n  </pw-no-data>\n}\n<pw-password-validation\n  #recoverSubscriptionPasswordModal\n  (successEvent)=\"onRecoverConfirmed()\">\n</pw-password-validation>\n\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.table-responsive td{padding:6px 10px!important;font-size:12px!important;line-height:1.35;vertical-align:top;word-break:break-word}.table-responsive th{font-size:12px!important;vertical-align:bottom}.table-responsive td[data-head=Organization],.table-responsive td[data-head=Name],.table-responsive td[data-head=ContactName],.table-responsive td[data-head=ContactEmail],.table-responsive td[data-head=id],.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{white-space:nowrap}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(7),.table-responsive th:nth-child(11),.table-responsive th:nth-child(12){text-align:right}.table-responsive .badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;letter-spacing:.01em}.table-responsive .badge[class*=bg-success]{background-color:#e6f4ec!important;color:#0f6b3a!important}.table-responsive .badge[class*=bg-danger]{background-color:#fbeae8!important;color:#c0392b!important}.table-responsive .badge[class*=bg-warning]{background-color:#fbf1e3!important;color:#8a5a00!important}.table-responsive .badge.bg-blue-grey{background-color:#eef0f3!important;color:#5a6473!important}.table-responsive .badge.bg-blue-grey-1{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-2{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-3{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-4{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-5{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-6{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-7{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-8{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-9{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-10{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-11{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-12{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-13{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-14{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-15{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-16{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-17{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-18{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-19{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-20{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-21{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-22{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-23{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-24{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge[class*=bg-success]:before,.table-responsive .badge[class*=bg-danger]:before,.table-responsive .badge[class*=bg-warning]:before{content:\"\";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background-color:currentColor;vertical-align:middle}.table-responsive tbody tr:hover{background-color:#f5f7fa}.table-responsive td[data-head=Organization] span,.table-responsive td[data-head=Name] span{font-weight:600;color:#1a1d21}.table-responsive td[data-head=Expires] span~span{font-weight:600}.table-responsive .list-action .edit-icon{color:#5a6473}.table-responsive .list-action .delete-icon{color:#c0392b!important}.table-responsive .list-action .delete-icon.text-success{color:#0f6b3a!important}@media(max-width:1199.98px){.table-responsive td,.table-responsive th{white-space:nowrap;word-break:normal}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.summary{display:flex}.summary .card{width:100%;margin-top:0;margin-bottom:0;padding-bottom:0!important;border:1px solid #e2e5ea;border-radius:8px;background-color:#fff;transition:background-color .12s ease,border-color .12s ease}.summary .card:hover{background-color:#fafbfc;border-color:#cfd4dc}.summary .card-body{display:flex;flex-direction:column;padding:2px 0}.summary .kpi{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;padding:10px 16px}.summary .kpi+.kpi{border-top:1px solid #eef0f3}.summary .kpi-label{grid-column:1/-1;margin:0 0 4px;font-size:10px;font-weight:600;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:#5a6473}.summary .kpi-label .fa-info-circle{margin-left:4px;font-size:15px;color:#a8afbc}.summary .kpi-value{grid-column:1;font-size:18px;font-weight:700;line-height:1.1;color:#1a1d21;font-variant-numeric:tabular-nums}.summary .kpi-comp{grid-column:2;text-align:right;font-size:12px;color:#7c8696;font-variant-numeric:tabular-nums;white-space:normal}.summary .kpi-comp:before{content:\"\\b7\";margin-right:4px;color:#a8afbc}.summary .kpi-comp b{font-weight:600;color:#5a6473}@media(min-width:320px)and (max-width:720px){.primeng-datatable-container .search-filter{display:flex;flex-direction:column;gap:.5rem;justify-content:space-between}}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.SinceAgoPipe, name: "sinceAgo" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: KpiInsightPipe, name: "kpiInsight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SubscriptionsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-subscriptions-list', standalone: false, 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 User to a Trial\n    </a>\n  </div>\n</div>\n<div class=\"p-2 mt-2\">\n  <div class=\"w-100 text-center\">\n    @if (!isLoaded) {\n      <p-progressSpinner> </p-progressSpinner>\n    }\n  </div>\n  <div class=\"primeng-datatable-container actions-collapsed 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        @if (subscriptionInsights) {\n          <div class=\"row mb-4\">\n            @for (temp of objectKeys(subscriptionInsights); track temp) {\n              <div class=\"col-12 col-lg-3 summary\">\n                <div class=\"card\">\n                  <div class=\"card-body\">\n                    @for (item of subscriptionInsights[temp]; track item) {\n                      @let k = item | kpiInsight;\n                      <div class=\"kpi\">\n                        <p class=\"kpi-label\">{{ k.name }}@if (item?.info) {<span [pTooltip]=\"item?.info\" tooltipPosition=\"top\" appendTo=\"body\"><i class=\"far fa-info-circle text-muted\"></i></span>}</p>\n                        <div class=\"kpi-value\">{{ k.primary }}</div>\n                        @if (k.secondary) {<div class=\"kpi-comp\">{{ k.comp }} <b>{{ k.secondary }}</b></div>}\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"search-filter\">\n          <div class=\"col-12 col-sm-4\">\n            <p-multiSelect inputId=\"subscriptions-list-feature-keys\"\n              styleClass=\"pw-filter-select\"\n              placeholder=\"Filter by feature keys\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              [maxSelectedLabels]=\"2\"\n              selectedItemsLabel=\"{0} feature keys selected\"\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            <p-select styleClass=\"pw-filter-select\"\n              inputId=\"subscriptions-list-status\"\n              [options]=\"subscriptionStatus\"\n              [placeholder]=\"'Filter by status'\"\n              (onChange)=\"filterByStatus($event.value)\"\n              [(ngModel)]=\"status\"\n              appendTo=\"body\">\n            </p-select>\n          </div>\n          <div class=\"text-end\">\n            <label for=\"subscriptions-list-search\" class=\"visually-hidden\">Search Subscription</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"subscriptions-list-search\"\n                name=\"subscriptions-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search subscriptions...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n            </p-iconfield>\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              appendTo=\"body\"\n            tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactName\" class=\"custom-break-word\">\n            <span [pTooltip]=\"item.contact_name\" tooltipPosition=\"top\" appendTo=\"body\">{{ item.contact_name | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactEmail\">\n            <span [pTooltip]=\"item.contact_email\" tooltipPosition=\"top\" appendTo=\"body\">{{ item.contact_email | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"Name\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.productName\"\n              appendTo=\"body\"\n            tooltipPosition=\"top\">{{ item.productName | textTruncate: 20 }}</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              @if (item?.discount && objectKeys(item?.discount)?.length) {\n                <i\n                  class=\"far fa-info-circle text-muted\"\n                  aria-hidden=\"true\"\n                  [pTooltip]=\"item?.discount | json\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\"\n                ></i>\n              }\n            </span>\n          </td>\n          <td data-head=\"Paid\">\n            @if (item?.unsubscribed_at) {\n              <span class=\"badge bg-warning d-inline-flex align-items-center\">\n                Unsub\n                @if (item?.reason_to_cancel) {\n                  <i class=\"far fa-info-circle ms-2 text-muted\"\n                    [pTooltip]=\"item.reason_to_cancel\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                  aria-hidden=\"true\"></i>\n                }\n              </span>\n            }\n            @if (!item?.unsubscribed_at) {\n              @if ((item?.stripe_customer_id || item?.external_payment) && item?.signed_up_at) {\n                <span class=\"badge bg-success\">Yes</span>\n              } @else {\n                <span class=\"badge bg-blue-grey\">No</span>\n              }\n            }\n            @if (item?.pause_collection && objectKeys(item?.pause_collection)?.length) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"item?.pause_collection | json\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\">\n                <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n              </span>\n            }\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>\n            <span>&nbsp;({{item?.created_at | sinceAgo:true}})</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            @if (item?.deleted_at) {\n              <span\n              class=\"badge bg-danger\">Yes</span>\n            }\n            @if (!item?.deleted_at) {\n              <span\n              class=\"badge bg-blue-grey\">No</span>\n            }\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Edit\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\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              @if (item.deleted) {\n                <li pTooltip=\"Reactivate subscription\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\"\n                  class=\"me-2 me-sm-3\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  (keydown.enter)=\"openRecoverSubscriptionModal(item)\"\n                  (click)=\"openRecoverSubscriptionModal(item)\">\n                  <i class=\"fa fa-trash delete-icon text-success\" aria-hidden=\"true\"></i>\n                </li>\n              } @else {\n                <li pTooltip=\"Delete\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\"\n                  class=\"me-2 me-sm-3\"\n                  *rbacAllow=\"'Pages.Admin.Subscription.Delete'\"\n                  (keydown.enter)=\"onDelete(item)\"\n                  (click)=\"onDelete(item)\">\n                  <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionMessage' | transloco\">\n  </pw-no-data>\n}\n<pw-password-validation\n  #recoverSubscriptionPasswordModal\n  (successEvent)=\"onRecoverConfirmed()\">\n</pw-password-validation>\n\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.table-responsive td{padding:6px 10px!important;font-size:12px!important;line-height:1.35;vertical-align:top;word-break:break-word}.table-responsive th{font-size:12px!important;vertical-align:bottom}.table-responsive td[data-head=Organization],.table-responsive td[data-head=Name],.table-responsive td[data-head=ContactName],.table-responsive td[data-head=ContactEmail],.table-responsive td[data-head=id],.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{white-space:nowrap}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(7),.table-responsive th:nth-child(11),.table-responsive th:nth-child(12){text-align:right}.table-responsive .badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;letter-spacing:.01em}.table-responsive .badge[class*=bg-success]{background-color:#e6f4ec!important;color:#0f6b3a!important}.table-responsive .badge[class*=bg-danger]{background-color:#fbeae8!important;color:#c0392b!important}.table-responsive .badge[class*=bg-warning]{background-color:#fbf1e3!important;color:#8a5a00!important}.table-responsive .badge.bg-blue-grey{background-color:#eef0f3!important;color:#5a6473!important}.table-responsive .badge.bg-blue-grey-1{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-2{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-3{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-4{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-5{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-6{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-7{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-8{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-9{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-10{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-11{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-12{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-13{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-14{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-15{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-16{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-17{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-18{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-19{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-20{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-21{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-22{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-23{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-24{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge[class*=bg-success]:before,.table-responsive .badge[class*=bg-danger]:before,.table-responsive .badge[class*=bg-warning]:before{content:\"\";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background-color:currentColor;vertical-align:middle}.table-responsive tbody tr:hover{background-color:#f5f7fa}.table-responsive td[data-head=Organization] span,.table-responsive td[data-head=Name] span{font-weight:600;color:#1a1d21}.table-responsive td[data-head=Expires] span~span{font-weight:600}.table-responsive .list-action .edit-icon{color:#5a6473}.table-responsive .list-action .delete-icon{color:#c0392b!important}.table-responsive .list-action .delete-icon.text-success{color:#0f6b3a!important}@media(max-width:1199.98px){.table-responsive td,.table-responsive th{white-space:nowrap;word-break:normal}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.summary{display:flex}.summary .card{width:100%;margin-top:0;margin-bottom:0;padding-bottom:0!important;border:1px solid #e2e5ea;border-radius:8px;background-color:#fff;transition:background-color .12s ease,border-color .12s ease}.summary .card:hover{background-color:#fafbfc;border-color:#cfd4dc}.summary .card-body{display:flex;flex-direction:column;padding:2px 0}.summary .kpi{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;padding:10px 16px}.summary .kpi+.kpi{border-top:1px solid #eef0f3}.summary .kpi-label{grid-column:1/-1;margin:0 0 4px;font-size:10px;font-weight:600;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:#5a6473}.summary .kpi-label .fa-info-circle{margin-left:4px;font-size:15px;color:#a8afbc}.summary .kpi-value{grid-column:1;font-size:18px;font-weight:700;line-height:1.1;color:#1a1d21;font-variant-numeric:tabular-nums}.summary .kpi-comp{grid-column:2;text-align:right;font-size:12px;color:#7c8696;font-variant-numeric:tabular-nums;white-space:normal}.summary .kpi-comp:before{content:\"\\b7\";margin-right:4px;color:#a8afbc}.summary .kpi-comp b{font-weight:600;color:#5a6473}@media(min-width:320px)and (max-width:720px){.primeng-datatable-container .search-filter{display:flex;flex-direction:column;gap:.5rem;justify-content:space-between}}\n"] }]
+            args: [{ selector: 'pw-subscriptions-list', standalone: false, 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 User to a Trial\n    </a>\n  </div>\n</div>\n<div class=\"p-2 mt-2\">\n  <div class=\"w-100 text-center\">\n    @if (!isLoaded) {\n      <p-progressSpinner> </p-progressSpinner>\n    }\n  </div>\n  <div class=\"primeng-datatable-container actions-collapsed 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        @if (subscriptionInsights) {\n          <div class=\"row mb-4\">\n            @for (temp of objectKeys(subscriptionInsights); track temp) {\n              <div class=\"col-12 col-lg-3 summary\">\n                <div class=\"card\">\n                  <div class=\"card-body\">\n                    @for (item of subscriptionInsights[temp]; track item) {\n                      @let k = item | kpiInsight;\n                      <div class=\"kpi\">\n                        <p class=\"kpi-label\">{{ k.name }}@if (item?.info) {<span [pTooltip]=\"item?.info\" tooltipPosition=\"top\" appendTo=\"body\"><i class=\"far fa-info-circle text-muted\"></i></span>}</p>\n                        <div class=\"kpi-value\">{{ k.primary }}</div>\n                        @if (k.secondary) {<div class=\"kpi-comp\">{{ k.comp }} <b>{{ k.secondary }}</b></div>}\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"search-filter\">\n          <div class=\"col-12 col-sm-4\">\n            <p-multiSelect inputId=\"subscriptions-list-feature-keys\"\n              styleClass=\"pw-filter-select\"\n              placeholder=\"Filter by feature keys\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              [maxSelectedLabels]=\"2\"\n              selectedItemsLabel=\"{0} feature keys selected\"\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            <p-select styleClass=\"pw-filter-select\"\n              inputId=\"subscriptions-list-status\"\n              [options]=\"subscriptionStatus\"\n              [placeholder]=\"'Filter by status'\"\n              (onChange)=\"filterByStatus($event.value)\"\n              [(ngModel)]=\"status\"\n              appendTo=\"body\">\n            </p-select>\n          </div>\n          <div class=\"text-end\">\n            <label for=\"subscriptions-list-search\" class=\"visually-hidden\">Search Subscription</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"subscriptions-list-search\"\n                name=\"subscriptions-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search subscriptions...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n            </p-iconfield>\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              appendTo=\"body\"\n            tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactName\" class=\"custom-break-word\">\n            <span [pTooltip]=\"item.contact_name\" tooltipPosition=\"top\" appendTo=\"body\">{{ item.contact_name | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactEmail\">\n            <span [pTooltip]=\"item.contact_email\" tooltipPosition=\"top\" appendTo=\"body\">{{ item.contact_email | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"Name\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.productName\"\n              appendTo=\"body\"\n            tooltipPosition=\"top\">{{ item.productName | textTruncate: 20 }}</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              @if (item?.discount && objectKeys(item?.discount)?.length) {\n                <i\n                  class=\"far fa-info-circle text-muted\"\n                  aria-hidden=\"true\"\n                  [pTooltip]=\"item?.discount | json\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\"\n                ></i>\n              }\n            </span>\n          </td>\n          <td data-head=\"Paid\">\n            @if (item?.unsubscribed_at) {\n              <span class=\"badge bg-warning d-inline-flex align-items-center\">\n                Unsub\n                @if (item?.reason_to_cancel) {\n                  <i class=\"far fa-info-circle ms-2 text-muted\"\n                    [pTooltip]=\"item.reason_to_cancel\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                  aria-hidden=\"true\"></i>\n                }\n              </span>\n            }\n            @if (!item?.unsubscribed_at) {\n              @if ((item?.stripe_customer_id || item?.external_payment) && item?.signed_up_at) {\n                <span class=\"badge bg-success\">Yes</span>\n              } @else {\n                <span class=\"badge bg-blue-grey\">No</span>\n              }\n            }\n            @if (item?.pause_collection && objectKeys(item?.pause_collection)?.length) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"item?.pause_collection | json\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\">\n                <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n              </span>\n            }\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>\n            <span>&nbsp;({{item?.created_at | sinceAgo:true}})</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            @if (item?.deleted_at) {\n              <span\n              class=\"badge bg-danger\">Yes</span>\n            }\n            @if (!item?.deleted_at) {\n              <span\n              class=\"badge bg-blue-grey\">No</span>\n            }\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Edit\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\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              @if (item.deleted) {\n                <li pTooltip=\"Reactivate subscription\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\"\n                  class=\"me-2 me-sm-3\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  (keydown.enter)=\"openRecoverSubscriptionModal(item)\"\n                  (click)=\"openRecoverSubscriptionModal(item)\">\n                  <i class=\"fa fa-trash delete-icon text-success\" aria-hidden=\"true\"></i>\n                </li>\n              } @else {\n                <li pTooltip=\"Delete\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\"\n                  class=\"me-2 me-sm-3\"\n                  *rbacAllow=\"'Pages.Admin.Subscription.Delete'\"\n                  (keydown.enter)=\"onDelete(item)\"\n                  (click)=\"onDelete(item)\">\n                  <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionMessage' | transloco\">\n  </pw-no-data>\n}\n<pw-password-validation\n  #recoverSubscriptionPasswordModal\n  (successEvent)=\"onRecoverConfirmed()\">\n</pw-password-validation>\n\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.table-responsive td{padding:6px 10px!important;font-size:12px!important;line-height:1.35;vertical-align:top;word-break:break-word}.table-responsive th{font-size:12px!important;vertical-align:bottom}.table-responsive td[data-head=Organization],.table-responsive td[data-head=Name],.table-responsive td[data-head=ContactName],.table-responsive td[data-head=ContactEmail],.table-responsive td[data-head=id],.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{white-space:nowrap}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(7),.table-responsive th:nth-child(11),.table-responsive th:nth-child(12){text-align:right}.table-responsive .badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;letter-spacing:.01em}.table-responsive .badge[class*=bg-success]{background-color:#e6f4ec!important;color:#0f6b3a!important}.table-responsive .badge[class*=bg-danger]{background-color:#fbeae8!important;color:#c0392b!important}.table-responsive .badge[class*=bg-warning]{background-color:#fbf1e3!important;color:#8a5a00!important}.table-responsive .badge.bg-blue-grey{background-color:#eef0f3!important;color:#5a6473!important}.table-responsive .badge.bg-blue-grey-1{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-2{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-3{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-4{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-5{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-6{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-7{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-8{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-9{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-10{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-11{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-12{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-13{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-14{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-15{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-16{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-17{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-18{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-19{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-20{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-21{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-22{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-23{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-24{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge[class*=bg-success]:before,.table-responsive .badge[class*=bg-danger]:before,.table-responsive .badge[class*=bg-warning]:before{content:\"\";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background-color:currentColor;vertical-align:middle}.table-responsive tbody tr:hover{background-color:#f5f7fa}.table-responsive td[data-head=Organization] span,.table-responsive td[data-head=Name] span{font-weight:600;color:#1a1d21}.table-responsive td[data-head=Expires] span~span{font-weight:600}.table-responsive .list-action .edit-icon{color:#5a6473}.table-responsive .list-action .delete-icon{color:#c0392b!important}.table-responsive .list-action .delete-icon.text-success{color:#0f6b3a!important}@media(max-width:1199.98px){.table-responsive td,.table-responsive th{white-space:nowrap;word-break:normal}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.summary{display:flex}.summary .card{width:100%;margin-top:0;margin-bottom:0;padding-bottom:0!important;border:1px solid #e2e5ea;border-radius:8px;background-color:#fff;transition:background-color .12s ease,border-color .12s ease}.summary .card:hover{background-color:#fafbfc;border-color:#cfd4dc}.summary .card-body{display:flex;flex-direction:column;padding:2px 0}.summary .kpi{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;padding:10px 16px}.summary .kpi+.kpi{border-top:1px solid #eef0f3}.summary .kpi-label{grid-column:1/-1;margin:0 0 4px;font-size:10px;font-weight:600;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:#5a6473}.summary .kpi-label .fa-info-circle{margin-left:4px;font-size:15px;color:#a8afbc}.summary .kpi-value{grid-column:1;font-size:18px;font-weight:700;line-height:1.1;color:#1a1d21;font-variant-numeric:tabular-nums}.summary .kpi-comp{grid-column:2;text-align:right;font-size:12px;color:#7c8696;font-variant-numeric:tabular-nums;white-space:normal}.summary .kpi-comp:before{content:\"\\b7\";margin-right:4px;color:#a8afbc}.summary .kpi-comp b{font-weight:600;color:#5a6473}@media(min-width:320px)and (max-width:720px){.primeng-datatable-container .search-filter{display:flex;flex-direction:column;gap:.5rem;justify-content:space-between}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ProductService }, { type: i1.AdminService }, { type: i3$1.UntypedFormBuilder }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.CommonService }, { type: i3$2.ConfirmDialogService }], propDecorators: { refProduct: [{
                 type: ViewChild,
                 args: ['refProduct']
@@ -8937,11 +8956,11 @@ class TagsCategoryComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagsCategoryComponent, deps: [{ token: i0.Injector }, { token: i1$1.TagService }, { token: i1$1.CustomToastService }, { token: i2.NgbModal }, { token: i0.ChangeDetectorRef }, { token: i3$2.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TagsCategoryComponent, isStandalone: false, 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  @if (!isLoaded) {\n    <div class=\"w-100 text-center p-2 mt-3\"\n      >\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n  }\n  <div class=\"primeng-datatable-container actions-collapsed 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          <label for=\"tags-category-search\" class=\"visually-hidden\">Search Category</label>\n          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"tags-category-search\"\n              name=\"tags-category-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search categories...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n                (keydown.enter)=\"onCategoryEdit(tagCategoryModal, item)\"\n                (click)=\"onCategoryEdit(tagCategoryModal, item)\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                *rbacAllow=\"'Pages.Admin.Roles.Delete'\"\n                (keydown.enter)=\"onDelete(item)\"\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    @if (totalCategoryRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div >\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" />\n      </div>\n    }\n    @if (totalCategoryRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalCategoryRecords\" />\n    }\n  </div>\n  @if (!loading && totalRecordsUnFiltered === 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.NoCategoryDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\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          id=\"tags-category-name\"\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: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TagsCategoryComponent, isStandalone: false, 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  @if (!isLoaded) {\n    <div class=\"w-100 text-center p-2 mt-3\"\n      >\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n  }\n  <div class=\"primeng-datatable-container actions-collapsed 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          <label for=\"tags-category-search\" class=\"visually-hidden\">Search Category</label>\n          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"tags-category-search\"\n              name=\"tags-category-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search categories...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n                (keydown.enter)=\"onCategoryEdit(tagCategoryModal, item)\"\n                (click)=\"onCategoryEdit(tagCategoryModal, item)\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                *rbacAllow=\"'Pages.Admin.Roles.Delete'\"\n                (keydown.enter)=\"onDelete(item)\"\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    @if (totalCategoryRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div >\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" />\n      </div>\n    }\n    @if (totalCategoryRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalCategoryRecords\" />\n    }\n  </div>\n  @if (!loading && totalRecordsUnFiltered === 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.NoCategoryDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\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          id=\"tags-category-name\"\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: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagsCategoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-tags-category', standalone: false, 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  @if (!isLoaded) {\n    <div class=\"w-100 text-center p-2 mt-3\"\n      >\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n  }\n  <div class=\"primeng-datatable-container actions-collapsed 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          <label for=\"tags-category-search\" class=\"visually-hidden\">Search Category</label>\n          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"tags-category-search\"\n              name=\"tags-category-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search categories...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n                (keydown.enter)=\"onCategoryEdit(tagCategoryModal, item)\"\n                (click)=\"onCategoryEdit(tagCategoryModal, item)\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                *rbacAllow=\"'Pages.Admin.Roles.Delete'\"\n                (keydown.enter)=\"onDelete(item)\"\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    @if (totalCategoryRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div >\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" />\n      </div>\n    }\n    @if (totalCategoryRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalCategoryRecords\" />\n    }\n  </div>\n  @if (!loading && totalRecordsUnFiltered === 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.NoCategoryDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\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          id=\"tags-category-name\"\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: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
+            args: [{ selector: 'pw-admin-tags-category', standalone: false, 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  @if (!isLoaded) {\n    <div class=\"w-100 text-center p-2 mt-3\"\n      >\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n  }\n  <div class=\"primeng-datatable-container actions-collapsed 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          <label for=\"tags-category-search\" class=\"visually-hidden\">Search Category</label>\n          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"tags-category-search\"\n              name=\"tags-category-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search categories...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n                (keydown.enter)=\"onCategoryEdit(tagCategoryModal, item)\"\n                (click)=\"onCategoryEdit(tagCategoryModal, item)\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                *rbacAllow=\"'Pages.Admin.Roles.Delete'\"\n                (keydown.enter)=\"onDelete(item)\"\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    @if (totalCategoryRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div >\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" />\n      </div>\n    }\n    @if (totalCategoryRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalCategoryRecords\" />\n    }\n  </div>\n  @if (!loading && totalRecordsUnFiltered === 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.NoCategoryDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\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          id=\"tags-category-name\"\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: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.TagService }, { type: i1$1.CustomToastService }, { type: i2.NgbModal }, { type: i0.ChangeDetectorRef }, { type: i3$2.ConfirmDialogService }] });
 
 class TagDetailsComponent extends AppBaseComponent {
@@ -9447,11 +9466,11 @@ class TermsOfServiceComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TermsOfServiceComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3$2.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TermsOfServiceComponent, isStandalone: false, 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=\"'SubscriptionSuperAdmin || SubscriptionOwner'\" 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> Add Terms of Services </button>\n    </div>\n  </div>\n  <div class=\"w-100 text-center mt-3\">\n    @if (!isLoaded) {\n      <p-progressSpinner> </p-progressSpinner>\n    }\n  </div>\n  <div class=\"primeng-datatable-container actions-collapsed 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          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"terms-of-service-search\"\n              name=\"terms-of-service-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search terms...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\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 pTooltip=\"{{tos.title}}\" tooltipPosition=\"top\" appendTo=\"body\" [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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\" *rbacAllow=\"'SubscriptionSuperAdmin || SubscriptionOwner'\"\n                [routerLink]=\"[routers.tosAndPrivacyDetails + tos.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\" *rbacAllow=\"'SubscriptionSuperAdmin || SubscriptionOwner'\" class=\"me-2 me-sm-3\">\n                <i (keydown.enter)=\"onDelete(tos.id)\" (keydown.space)=\"onDelete(tos.id)\" (click)=\"onDelete(tos.id)\" class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"View TOS\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\">\n                <a aria-label=\"View TOS\" [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    @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n  @if (data.unfiltered_count === 0 && isLoaded) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Tos.NoDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TermsOfServiceComponent, isStandalone: false, 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=\"'SubscriptionSuperAdmin || SubscriptionOwner'\" 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> Add Terms of Services </button>\n    </div>\n  </div>\n  <div class=\"w-100 text-center mt-3\">\n    @if (!isLoaded) {\n      <p-progressSpinner> </p-progressSpinner>\n    }\n  </div>\n  <div class=\"primeng-datatable-container actions-collapsed 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          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"terms-of-service-search\"\n              name=\"terms-of-service-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search terms...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\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 pTooltip=\"{{tos.title}}\" tooltipPosition=\"top\" appendTo=\"body\" [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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\" *rbacAllow=\"'SubscriptionSuperAdmin || SubscriptionOwner'\"\n                [routerLink]=\"[routers.tosAndPrivacyDetails + tos.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\" *rbacAllow=\"'SubscriptionSuperAdmin || SubscriptionOwner'\" class=\"me-2 me-sm-3\">\n                <i (keydown.enter)=\"onDelete(tos.id)\" (keydown.space)=\"onDelete(tos.id)\" (click)=\"onDelete(tos.id)\" class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"View TOS\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\">\n                <a aria-label=\"View TOS\" [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    @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n  @if (data.unfiltered_count === 0 && isLoaded) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Tos.NoDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TermsOfServiceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-terms-of-service', standalone: false, 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=\"'SubscriptionSuperAdmin || SubscriptionOwner'\" 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> Add Terms of Services </button>\n    </div>\n  </div>\n  <div class=\"w-100 text-center mt-3\">\n    @if (!isLoaded) {\n      <p-progressSpinner> </p-progressSpinner>\n    }\n  </div>\n  <div class=\"primeng-datatable-container actions-collapsed 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          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"terms-of-service-search\"\n              name=\"terms-of-service-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search terms...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\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 pTooltip=\"{{tos.title}}\" tooltipPosition=\"top\" appendTo=\"body\" [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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\" *rbacAllow=\"'SubscriptionSuperAdmin || SubscriptionOwner'\"\n                [routerLink]=\"[routers.tosAndPrivacyDetails + tos.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\" *rbacAllow=\"'SubscriptionSuperAdmin || SubscriptionOwner'\" class=\"me-2 me-sm-3\">\n                <i (keydown.enter)=\"onDelete(tos.id)\" (keydown.space)=\"onDelete(tos.id)\" (click)=\"onDelete(tos.id)\" class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"View TOS\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\">\n                <a aria-label=\"View TOS\" [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    @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n  @if (data.unfiltered_count === 0 && isLoaded) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Tos.NoDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"] }]
+            args: [{ selector: 'pw-terms-of-service', standalone: false, 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=\"'SubscriptionSuperAdmin || SubscriptionOwner'\" 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> Add Terms of Services </button>\n    </div>\n  </div>\n  <div class=\"w-100 text-center mt-3\">\n    @if (!isLoaded) {\n      <p-progressSpinner> </p-progressSpinner>\n    }\n  </div>\n  <div class=\"primeng-datatable-container actions-collapsed 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          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"terms-of-service-search\"\n              name=\"terms-of-service-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search terms...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\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 pTooltip=\"{{tos.title}}\" tooltipPosition=\"top\" appendTo=\"body\" [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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\" *rbacAllow=\"'SubscriptionSuperAdmin || SubscriptionOwner'\"\n                [routerLink]=\"[routers.tosAndPrivacyDetails + tos.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\" *rbacAllow=\"'SubscriptionSuperAdmin || SubscriptionOwner'\" class=\"me-2 me-sm-3\">\n                <i (keydown.enter)=\"onDelete(tos.id)\" (keydown.space)=\"onDelete(tos.id)\" (click)=\"onDelete(tos.id)\" class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"View TOS\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\">\n                <a aria-label=\"View TOS\" [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    @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n  @if (data.unfiltered_count === 0 && isLoaded) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Tos.NoDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.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 }, { type: i3$2.ConfirmDialogService }] });
 
 class TermsOfServiceDetailsComponent extends AppBaseComponent {
@@ -9740,11 +9759,11 @@ class AhoyEventsComponent extends AppBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AhoyEventsComponent, deps: [{ token: i0.Injector }, { token: i2.NgbModal }, { token: i1$1.AhoyService }, { token: i1.AdminDataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AhoyEventsComponent, isStandalone: false, selector: "pw-ahoy-events", viewQueries: [{ propertyName: "multiSelector", first: true, predicate: ["multiSelector"], 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\">Ahoy Events</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.events\"\n      [paginator]=\"data.object_count !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [sortField]=\"defaultSortField\"\n      [sortOrder]=\"defaultSortOrder\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-events-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"ahoy-events-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"ahoy-events-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"ahoy-events-search\" class=\"visually-hidden\">Search Events</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"ahoy-events-search\"\n                name=\"ahoy-events-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search events...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\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            {{ 'Admin.Tracking.Properties' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"time\">\n            {{ 'Admin.Tracking.Time' | transloco }}\n            <p-sortIcon field=\"time\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"user_id\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"user_id\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-event>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Name\">{{ event.name }}</td>\n          <td data-head=\"Properties\">\n            @if ((event?.properties | json) !== '{}') {\n              <span class=\"badge bg-info cursor-pointer\"\n              (click)=\"revealProp(objModal,event?.properties)\" (keydown.enter)=\"revealProp(objModal,event?.properties)\">Reveal properties</span>\n            }</td>\n            <td data-head=\"Time\">{{ event.time | dateFormat: 'datetime'}}</td>\n            <td data-head=\"User\">\n              @if (event?.user_id) {\n                <span>\n                  @if (event?.user) {\n                    <span><a [routerLink]=\"['/members', event?.user?.slug]\">{{ event?.user?.first_name }} {{ event?.user?.last_name }}</a></span>\n                  }\n                  @if (!event?.user) {\n                    <span>{{ event?.user_id }}</span>\n                  }\n                </span>\n              }\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n          </pw-no-data>\n        </div>\n      }\n      @if (data.object_count !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n      }\n    </div>\n  </div>\n  @if (!loading && data.unfiltered_count === 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventsDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n  <!-- Object Modal -->\n  <ng-template #objModal\n    let-modal>\n    <div class=\"modal-header\">\n      <h4 class=\"modal-title\">{{ 'Admin.Tracking.Properties' | transloco }}</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      @if (activeObject) {\n        <div>\n          <ngx-json-viewer [json]=\"activeObject\"\n          [expanded]=\"false\"></ngx-json-viewer>\n        </div>\n      }\n    </div>\n  </ng-template>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i11.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "component", type: i5$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AhoyEventsComponent, isStandalone: false, selector: "pw-ahoy-events", viewQueries: [{ propertyName: "multiSelector", first: true, predicate: ["multiSelector"], 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\">Ahoy Events</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.events\"\n      [paginator]=\"data.object_count !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [sortField]=\"defaultSortField\"\n      [sortOrder]=\"defaultSortOrder\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-events-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"ahoy-events-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"ahoy-events-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"ahoy-events-search\" class=\"visually-hidden\">Search Events</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"ahoy-events-search\"\n                name=\"ahoy-events-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search events...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\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            {{ 'Admin.Tracking.Properties' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"time\">\n            {{ 'Admin.Tracking.Time' | transloco }}\n            <p-sortIcon field=\"time\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"user_id\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"user_id\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-event>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Name\">{{ event.name }}</td>\n          <td data-head=\"Properties\">\n            @if ((event?.properties | json) !== '{}') {\n              <span class=\"badge bg-info cursor-pointer\"\n              (click)=\"revealProp(objModal,event?.properties)\" (keydown.enter)=\"revealProp(objModal,event?.properties)\">Reveal properties</span>\n            }</td>\n            <td data-head=\"Time\">{{ event.time | dateFormat: 'datetime'}}</td>\n            <td data-head=\"User\">\n              @if (event?.user_id) {\n                <span>\n                  @if (event?.user) {\n                    <span><a [routerLink]=\"['/members', event?.user?.slug]\">{{ event?.user?.first_name }} {{ event?.user?.last_name }}</a></span>\n                  }\n                  @if (!event?.user) {\n                    <span>{{ event?.user_id }}</span>\n                  }\n                </span>\n              }\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n          </pw-no-data>\n        </div>\n      }\n      @if (data.object_count !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n      }\n    </div>\n  </div>\n  @if (!loading && data.unfiltered_count === 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventsDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n  <!-- Object Modal -->\n  <ng-template #objModal\n    let-modal>\n    <div class=\"modal-header\">\n      <h4 class=\"modal-title\">{{ 'Admin.Tracking.Properties' | transloco }}</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      @if (activeObject) {\n        <div>\n          <ngx-json-viewer [json]=\"activeObject\"\n          [expanded]=\"false\"></ngx-json-viewer>\n        </div>\n      }\n    </div>\n  </ng-template>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i11.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "component", type: i5$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AhoyEventsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-ahoy-events', standalone: false, 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\">Ahoy Events</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.events\"\n      [paginator]=\"data.object_count !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [sortField]=\"defaultSortField\"\n      [sortOrder]=\"defaultSortOrder\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-events-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"ahoy-events-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"ahoy-events-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"ahoy-events-search\" class=\"visually-hidden\">Search Events</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"ahoy-events-search\"\n                name=\"ahoy-events-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search events...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\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            {{ 'Admin.Tracking.Properties' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"time\">\n            {{ 'Admin.Tracking.Time' | transloco }}\n            <p-sortIcon field=\"time\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"user_id\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"user_id\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-event>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Name\">{{ event.name }}</td>\n          <td data-head=\"Properties\">\n            @if ((event?.properties | json) !== '{}') {\n              <span class=\"badge bg-info cursor-pointer\"\n              (click)=\"revealProp(objModal,event?.properties)\" (keydown.enter)=\"revealProp(objModal,event?.properties)\">Reveal properties</span>\n            }</td>\n            <td data-head=\"Time\">{{ event.time | dateFormat: 'datetime'}}</td>\n            <td data-head=\"User\">\n              @if (event?.user_id) {\n                <span>\n                  @if (event?.user) {\n                    <span><a [routerLink]=\"['/members', event?.user?.slug]\">{{ event?.user?.first_name }} {{ event?.user?.last_name }}</a></span>\n                  }\n                  @if (!event?.user) {\n                    <span>{{ event?.user_id }}</span>\n                  }\n                </span>\n              }\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n          </pw-no-data>\n        </div>\n      }\n      @if (data.object_count !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n      }\n    </div>\n  </div>\n  @if (!loading && data.unfiltered_count === 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventsDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n  <!-- Object Modal -->\n  <ng-template #objModal\n    let-modal>\n    <div class=\"modal-header\">\n      <h4 class=\"modal-title\">{{ 'Admin.Tracking.Properties' | transloco }}</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      @if (activeObject) {\n        <div>\n          <ngx-json-viewer [json]=\"activeObject\"\n          [expanded]=\"false\"></ngx-json-viewer>\n        </div>\n      }\n    </div>\n  </ng-template>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
+            args: [{ selector: 'pw-ahoy-events', standalone: false, 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\">Ahoy Events</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.events\"\n      [paginator]=\"data.object_count !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [sortField]=\"defaultSortField\"\n      [sortOrder]=\"defaultSortOrder\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-events-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"ahoy-events-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"ahoy-events-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"ahoy-events-search\" class=\"visually-hidden\">Search Events</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"ahoy-events-search\"\n                name=\"ahoy-events-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search events...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\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            {{ 'Admin.Tracking.Properties' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"time\">\n            {{ 'Admin.Tracking.Time' | transloco }}\n            <p-sortIcon field=\"time\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"user_id\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"user_id\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-event>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Name\">{{ event.name }}</td>\n          <td data-head=\"Properties\">\n            @if ((event?.properties | json) !== '{}') {\n              <span class=\"badge bg-info cursor-pointer\"\n              (click)=\"revealProp(objModal,event?.properties)\" (keydown.enter)=\"revealProp(objModal,event?.properties)\">Reveal properties</span>\n            }</td>\n            <td data-head=\"Time\">{{ event.time | dateFormat: 'datetime'}}</td>\n            <td data-head=\"User\">\n              @if (event?.user_id) {\n                <span>\n                  @if (event?.user) {\n                    <span><a [routerLink]=\"['/members', event?.user?.slug]\">{{ event?.user?.first_name }} {{ event?.user?.last_name }}</a></span>\n                  }\n                  @if (!event?.user) {\n                    <span>{{ event?.user_id }}</span>\n                  }\n                </span>\n              }\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n          </pw-no-data>\n        </div>\n      }\n      @if (data.object_count !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n      }\n    </div>\n  </div>\n  @if (!loading && data.unfiltered_count === 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventsDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n  <!-- Object Modal -->\n  <ng-template #objModal\n    let-modal>\n    <div class=\"modal-header\">\n      <h4 class=\"modal-title\">{{ 'Admin.Tracking.Properties' | transloco }}</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      @if (activeObject) {\n        <div>\n          <ngx-json-viewer [json]=\"activeObject\"\n          [expanded]=\"false\"></ngx-json-viewer>\n        </div>\n      }\n    </div>\n  </ng-template>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i2.NgbModal }, { type: i1$1.AhoyService }, { type: i1.AdminDataService }, { type: i0.ChangeDetectorRef }], propDecorators: { multiSelector: [{
                 type: ViewChild,
                 args: ['multiSelector']
@@ -9915,11 +9934,11 @@ class AhoyMessagesComponent extends AppBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AhoyMessagesComponent, deps: [{ token: i0.Injector }, { token: i1$1.AhoyService }, { token: i0.ChangeDetectorRef }, { token: i1.AdminDataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AhoyMessagesComponent, isStandalone: false, selector: "pw-ahoy-messages", 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\">Ahoy Messages</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.messages\"\n      [paginator]=\"data.object_count !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [sortField]=\"'sent_at'\"\n      [sortOrder]=\"-1\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-messages-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2 mx-3\">\n            <p-datepicker inputId=\"ahoy-messages-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"ahoy-messages-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"ahoy-messages-search\" class=\"visually-hidden\">Search Messages</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"ahoy-messages-search\"\n                name=\"ahoy-messages-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search messages...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"mailer\">\n            {{ 'Admin.Tracking.Mailer' | transloco }}\n            <p-sortIcon field=\"mailer\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sent_at\">\n            {{ 'Admin.Tracking.SentAt' | transloco }}\n            <p-sortIcon field=\"sent_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"subject\">\n            {{ 'Admin.Tracking.Subject' | transloco }}\n            <p-sortIcon field=\"subject\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"to\">\n            {{ 'Admin.Tracking.To' | transloco }}\n            <p-sortIcon field=\"to\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"user_id\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"user_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"clicked_at\">\n            {{ 'Admin.Tracking.LastClickedAt' | transloco }}\n            <p-sortIcon field=\"clicked_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"opened_at\">\n            {{ 'Admin.Tracking.LastOpenedAt' | transloco }}\n            <p-sortIcon field=\"opened_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"click_count\">\n            {{ 'Admin.Tracking.ClickCount' | transloco }}\n            <p-sortIcon field=\"click_count\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"open_count\">\n            {{ 'Admin.Tracking.OpenCount' | transloco }}\n            <p-sortIcon field=\"open_count\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-messages>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Mailer\">{{ messages.mailer }}</td>\n          <td data-head=\"Sent At\">{{ messages.sent_at | dateFormat: 'datetime' }}</td>\n          <td data-head=\"Subject\">{{ messages.subject | textTruncate: 30 }}</td>\n          <td data-head=\"To\">{{ messages.to }}</td>\n          <td data-head=\"User\">\n            @if (messages?.user_id) {\n              <span>\n                @if (messages?.user) {\n                  <span><a [routerLink]=\"['/members', messages?.user?.slug]\">{{ messages?.user?.first_name }} {{ messages?.user?.last_name }}</a></span>\n                }\n                @if (!messages?.user) {\n                  <span>{{ messages?.user_id }}</span>\n                }\n              </span>\n            }\n          </td>\n          <td data-head=\"Last Clicked At\">\n            {{ messages?.clicked_at | dateFormat: 'datetime' }}\n          </td>\n          <td data-head=\"Last Opened At\">\n            {{ messages?.opened_at | dateFormat: 'datetime' }}\n          </td>\n          <td data-head=\"Click Count\">{{ messages?.click_count }}</td>\n          <td data-head=\"Open Count\">{{ messages?.open_count }}</td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoMessagesDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i5$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AhoyMessagesComponent, isStandalone: false, selector: "pw-ahoy-messages", 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\">Ahoy Messages</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.messages\"\n      [paginator]=\"data.object_count !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [sortField]=\"'sent_at'\"\n      [sortOrder]=\"-1\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-messages-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2 mx-3\">\n            <p-datepicker inputId=\"ahoy-messages-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"ahoy-messages-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"ahoy-messages-search\" class=\"visually-hidden\">Search Messages</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"ahoy-messages-search\"\n                name=\"ahoy-messages-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search messages...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"mailer\">\n            {{ 'Admin.Tracking.Mailer' | transloco }}\n            <p-sortIcon field=\"mailer\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sent_at\">\n            {{ 'Admin.Tracking.SentAt' | transloco }}\n            <p-sortIcon field=\"sent_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"subject\">\n            {{ 'Admin.Tracking.Subject' | transloco }}\n            <p-sortIcon field=\"subject\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"to\">\n            {{ 'Admin.Tracking.To' | transloco }}\n            <p-sortIcon field=\"to\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"user_id\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"user_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"clicked_at\">\n            {{ 'Admin.Tracking.LastClickedAt' | transloco }}\n            <p-sortIcon field=\"clicked_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"opened_at\">\n            {{ 'Admin.Tracking.LastOpenedAt' | transloco }}\n            <p-sortIcon field=\"opened_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"click_count\">\n            {{ 'Admin.Tracking.ClickCount' | transloco }}\n            <p-sortIcon field=\"click_count\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"open_count\">\n            {{ 'Admin.Tracking.OpenCount' | transloco }}\n            <p-sortIcon field=\"open_count\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-messages>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Mailer\">{{ messages.mailer }}</td>\n          <td data-head=\"Sent At\">{{ messages.sent_at | dateFormat: 'datetime' }}</td>\n          <td data-head=\"Subject\">{{ messages.subject | textTruncate: 30 }}</td>\n          <td data-head=\"To\">{{ messages.to }}</td>\n          <td data-head=\"User\">\n            @if (messages?.user_id) {\n              <span>\n                @if (messages?.user) {\n                  <span><a [routerLink]=\"['/members', messages?.user?.slug]\">{{ messages?.user?.first_name }} {{ messages?.user?.last_name }}</a></span>\n                }\n                @if (!messages?.user) {\n                  <span>{{ messages?.user_id }}</span>\n                }\n              </span>\n            }\n          </td>\n          <td data-head=\"Last Clicked At\">\n            {{ messages?.clicked_at | dateFormat: 'datetime' }}\n          </td>\n          <td data-head=\"Last Opened At\">\n            {{ messages?.opened_at | dateFormat: 'datetime' }}\n          </td>\n          <td data-head=\"Click Count\">{{ messages?.click_count }}</td>\n          <td data-head=\"Open Count\">{{ messages?.open_count }}</td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoMessagesDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i5$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AhoyMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-ahoy-messages', standalone: false, 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\">Ahoy Messages</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.messages\"\n      [paginator]=\"data.object_count !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [sortField]=\"'sent_at'\"\n      [sortOrder]=\"-1\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-messages-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2 mx-3\">\n            <p-datepicker inputId=\"ahoy-messages-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"ahoy-messages-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"ahoy-messages-search\" class=\"visually-hidden\">Search Messages</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"ahoy-messages-search\"\n                name=\"ahoy-messages-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search messages...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"mailer\">\n            {{ 'Admin.Tracking.Mailer' | transloco }}\n            <p-sortIcon field=\"mailer\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sent_at\">\n            {{ 'Admin.Tracking.SentAt' | transloco }}\n            <p-sortIcon field=\"sent_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"subject\">\n            {{ 'Admin.Tracking.Subject' | transloco }}\n            <p-sortIcon field=\"subject\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"to\">\n            {{ 'Admin.Tracking.To' | transloco }}\n            <p-sortIcon field=\"to\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"user_id\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"user_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"clicked_at\">\n            {{ 'Admin.Tracking.LastClickedAt' | transloco }}\n            <p-sortIcon field=\"clicked_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"opened_at\">\n            {{ 'Admin.Tracking.LastOpenedAt' | transloco }}\n            <p-sortIcon field=\"opened_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"click_count\">\n            {{ 'Admin.Tracking.ClickCount' | transloco }}\n            <p-sortIcon field=\"click_count\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"open_count\">\n            {{ 'Admin.Tracking.OpenCount' | transloco }}\n            <p-sortIcon field=\"open_count\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-messages>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Mailer\">{{ messages.mailer }}</td>\n          <td data-head=\"Sent At\">{{ messages.sent_at | dateFormat: 'datetime' }}</td>\n          <td data-head=\"Subject\">{{ messages.subject | textTruncate: 30 }}</td>\n          <td data-head=\"To\">{{ messages.to }}</td>\n          <td data-head=\"User\">\n            @if (messages?.user_id) {\n              <span>\n                @if (messages?.user) {\n                  <span><a [routerLink]=\"['/members', messages?.user?.slug]\">{{ messages?.user?.first_name }} {{ messages?.user?.last_name }}</a></span>\n                }\n                @if (!messages?.user) {\n                  <span>{{ messages?.user_id }}</span>\n                }\n              </span>\n            }\n          </td>\n          <td data-head=\"Last Clicked At\">\n            {{ messages?.clicked_at | dateFormat: 'datetime' }}\n          </td>\n          <td data-head=\"Last Opened At\">\n            {{ messages?.opened_at | dateFormat: 'datetime' }}\n          </td>\n          <td data-head=\"Click Count\">{{ messages?.click_count }}</td>\n          <td data-head=\"Open Count\">{{ messages?.open_count }}</td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoMessagesDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
+            args: [{ selector: 'pw-ahoy-messages', standalone: false, 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\">Ahoy Messages</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.messages\"\n      [paginator]=\"data.object_count !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [sortField]=\"'sent_at'\"\n      [sortOrder]=\"-1\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-messages-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2 mx-3\">\n            <p-datepicker inputId=\"ahoy-messages-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"ahoy-messages-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"ahoy-messages-search\" class=\"visually-hidden\">Search Messages</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"ahoy-messages-search\"\n                name=\"ahoy-messages-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search messages...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"mailer\">\n            {{ 'Admin.Tracking.Mailer' | transloco }}\n            <p-sortIcon field=\"mailer\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sent_at\">\n            {{ 'Admin.Tracking.SentAt' | transloco }}\n            <p-sortIcon field=\"sent_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"subject\">\n            {{ 'Admin.Tracking.Subject' | transloco }}\n            <p-sortIcon field=\"subject\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"to\">\n            {{ 'Admin.Tracking.To' | transloco }}\n            <p-sortIcon field=\"to\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"user_id\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"user_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"clicked_at\">\n            {{ 'Admin.Tracking.LastClickedAt' | transloco }}\n            <p-sortIcon field=\"clicked_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"opened_at\">\n            {{ 'Admin.Tracking.LastOpenedAt' | transloco }}\n            <p-sortIcon field=\"opened_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"click_count\">\n            {{ 'Admin.Tracking.ClickCount' | transloco }}\n            <p-sortIcon field=\"click_count\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"open_count\">\n            {{ 'Admin.Tracking.OpenCount' | transloco }}\n            <p-sortIcon field=\"open_count\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-messages>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Mailer\">{{ messages.mailer }}</td>\n          <td data-head=\"Sent At\">{{ messages.sent_at | dateFormat: 'datetime' }}</td>\n          <td data-head=\"Subject\">{{ messages.subject | textTruncate: 30 }}</td>\n          <td data-head=\"To\">{{ messages.to }}</td>\n          <td data-head=\"User\">\n            @if (messages?.user_id) {\n              <span>\n                @if (messages?.user) {\n                  <span><a [routerLink]=\"['/members', messages?.user?.slug]\">{{ messages?.user?.first_name }} {{ messages?.user?.last_name }}</a></span>\n                }\n                @if (!messages?.user) {\n                  <span>{{ messages?.user_id }}</span>\n                }\n              </span>\n            }\n          </td>\n          <td data-head=\"Last Clicked At\">\n            {{ messages?.clicked_at | dateFormat: 'datetime' }}\n          </td>\n          <td data-head=\"Last Opened At\">\n            {{ messages?.opened_at | dateFormat: 'datetime' }}\n          </td>\n          <td data-head=\"Click Count\">{{ messages?.click_count }}</td>\n          <td data-head=\"Open Count\">{{ messages?.open_count }}</td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoMessagesDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.AhoyService }, { type: i0.ChangeDetectorRef }, { type: i1.AdminDataService }] });
 
 class AhoyVisitsComponent extends AppBaseComponent {
@@ -10084,11 +10103,11 @@ class AhoyVisitsComponent extends AppBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AhoyVisitsComponent, deps: [{ token: i0.Injector }, { token: i1$1.AhoyService }, { token: i1.AdminDataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AhoyVisitsComponent, isStandalone: false, selector: "pw-ahoy-visits", 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\">Ahoy Visits</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.visits\"\n      [paginator]=\"data.object_count !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [sortField]=\"'started_at'\"\n      [sortOrder]=\"-1\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              [placeholder]=\"'Filter by service'\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-visits-filter-users\"\n              #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"yy-M-dd\"\n              >\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"yy-M-dd\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"ahoy-visits-search\" class=\"visually-hidden\">Search Visits</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"ahoy-visits-search\"\n                name=\"ahoy-visits-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search visits...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"browser\">\n            {{ 'Admin.Tracking.Browser' | transloco }}\n            <p-sortIcon field=\"browser\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"device_type\">\n            {{ 'Admin.Tracking.DeviceType' | transloco }}\n            <p-sortIcon field=\"device_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"ip\">\n            {{ 'Admin.Tracking.Ip' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"referring_domain\">\n            {{ 'Admin.Tracking.Domain' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"landing_page\">\n            {{ 'Admin.Tracking.LandingPage' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"country\">\n            {{ 'Admin.Tracking.Country' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"region\">\n            {{ 'Admin.Tracking.Region' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"city\">\n            {{ 'Admin.Tracking.City' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"os\">\n            {{ 'Admin.Tracking.Os' | transloco }}\n            <p-sortIcon field=\"os\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">\n            {{ 'Admin.Tracking.User' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"started_at\">\n            {{ 'Admin.Tracking.StartedAt' | transloco }}\n            <p-sortIcon field=\"started_at\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-visits>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Browser\">{{ visits.browser }}</td>\n          <td data-head=\"Device Type\">{{ visits.device_type }}</td>\n          <td data-head=\"IP\">{{ visits.ip }}</td>\n          <td data-head=\"referring_domain\">\n            <span [pTooltip]=\"visits.referring_domain\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.referring_domain | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"landing_page\">\n            <span [pTooltip]=\"visits.landing_page\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.landing_page | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"country\">\n            <span [pTooltip]=\"visits.country\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.country | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"region\">\n            <span [pTooltip]=\"visits.region\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.region | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"city\">\n            <span [pTooltip]=\"visits.city\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.city | textTruncate: 20 }}\n            </span></td>\n            <td data-head=\"OS\">{{ visits.os }}</td>\n            <td data-head=\"User\">\n              @if (visits?.user_id) {\n                <span>\n                  @if (visits?.user) {\n                    <span><a [routerLink]=\"['/members', visits?.user?.slug]\">{{ visits?.user?.first_name }} {{ visits?.user?.last_name }}</a></span>\n                  }\n                  @if (!visits?.user) {\n                    <span>{{ visits?.user_id }}</span>\n                  }\n                </span>\n              }\n            </td>\n            <td data-head=\"Started At\">{{ visits.started_at | dateFormat : 'datetime' }}</td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n          </pw-no-data>\n        </div>\n      }\n      @if (data.object_count !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n      }\n    </div>\n  </div>\n  @if (!loading && data.unfiltered_count === 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVistitsDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i5$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AhoyVisitsComponent, isStandalone: false, selector: "pw-ahoy-visits", 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\">Ahoy Visits</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.visits\"\n      [paginator]=\"data.object_count !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [sortField]=\"'started_at'\"\n      [sortOrder]=\"-1\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              [placeholder]=\"'Filter by service'\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-visits-filter-users\"\n              #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"yy-M-dd\"\n              >\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"yy-M-dd\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"ahoy-visits-search\" class=\"visually-hidden\">Search Visits</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"ahoy-visits-search\"\n                name=\"ahoy-visits-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search visits...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"browser\">\n            {{ 'Admin.Tracking.Browser' | transloco }}\n            <p-sortIcon field=\"browser\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"device_type\">\n            {{ 'Admin.Tracking.DeviceType' | transloco }}\n            <p-sortIcon field=\"device_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"ip\">\n            {{ 'Admin.Tracking.Ip' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"referring_domain\">\n            {{ 'Admin.Tracking.Domain' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"landing_page\">\n            {{ 'Admin.Tracking.LandingPage' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"country\">\n            {{ 'Admin.Tracking.Country' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"region\">\n            {{ 'Admin.Tracking.Region' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"city\">\n            {{ 'Admin.Tracking.City' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"os\">\n            {{ 'Admin.Tracking.Os' | transloco }}\n            <p-sortIcon field=\"os\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">\n            {{ 'Admin.Tracking.User' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"started_at\">\n            {{ 'Admin.Tracking.StartedAt' | transloco }}\n            <p-sortIcon field=\"started_at\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-visits>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Browser\">{{ visits.browser }}</td>\n          <td data-head=\"Device Type\">{{ visits.device_type }}</td>\n          <td data-head=\"IP\">{{ visits.ip }}</td>\n          <td data-head=\"referring_domain\">\n            <span [pTooltip]=\"visits.referring_domain\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.referring_domain | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"landing_page\">\n            <span [pTooltip]=\"visits.landing_page\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.landing_page | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"country\">\n            <span [pTooltip]=\"visits.country\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.country | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"region\">\n            <span [pTooltip]=\"visits.region\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.region | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"city\">\n            <span [pTooltip]=\"visits.city\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.city | textTruncate: 20 }}\n            </span></td>\n            <td data-head=\"OS\">{{ visits.os }}</td>\n            <td data-head=\"User\">\n              @if (visits?.user_id) {\n                <span>\n                  @if (visits?.user) {\n                    <span><a [routerLink]=\"['/members', visits?.user?.slug]\">{{ visits?.user?.first_name }} {{ visits?.user?.last_name }}</a></span>\n                  }\n                  @if (!visits?.user) {\n                    <span>{{ visits?.user_id }}</span>\n                  }\n                </span>\n              }\n            </td>\n            <td data-head=\"Started At\">{{ visits.started_at | dateFormat : 'datetime' }}</td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n          </pw-no-data>\n        </div>\n      }\n      @if (data.object_count !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n      }\n    </div>\n  </div>\n  @if (!loading && data.unfiltered_count === 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVistitsDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i5$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AhoyVisitsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-ahoy-visits', standalone: false, 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\">Ahoy Visits</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.visits\"\n      [paginator]=\"data.object_count !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [sortField]=\"'started_at'\"\n      [sortOrder]=\"-1\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              [placeholder]=\"'Filter by service'\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-visits-filter-users\"\n              #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"yy-M-dd\"\n              >\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"yy-M-dd\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"ahoy-visits-search\" class=\"visually-hidden\">Search Visits</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"ahoy-visits-search\"\n                name=\"ahoy-visits-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search visits...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"browser\">\n            {{ 'Admin.Tracking.Browser' | transloco }}\n            <p-sortIcon field=\"browser\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"device_type\">\n            {{ 'Admin.Tracking.DeviceType' | transloco }}\n            <p-sortIcon field=\"device_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"ip\">\n            {{ 'Admin.Tracking.Ip' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"referring_domain\">\n            {{ 'Admin.Tracking.Domain' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"landing_page\">\n            {{ 'Admin.Tracking.LandingPage' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"country\">\n            {{ 'Admin.Tracking.Country' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"region\">\n            {{ 'Admin.Tracking.Region' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"city\">\n            {{ 'Admin.Tracking.City' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"os\">\n            {{ 'Admin.Tracking.Os' | transloco }}\n            <p-sortIcon field=\"os\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">\n            {{ 'Admin.Tracking.User' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"started_at\">\n            {{ 'Admin.Tracking.StartedAt' | transloco }}\n            <p-sortIcon field=\"started_at\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-visits>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Browser\">{{ visits.browser }}</td>\n          <td data-head=\"Device Type\">{{ visits.device_type }}</td>\n          <td data-head=\"IP\">{{ visits.ip }}</td>\n          <td data-head=\"referring_domain\">\n            <span [pTooltip]=\"visits.referring_domain\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.referring_domain | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"landing_page\">\n            <span [pTooltip]=\"visits.landing_page\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.landing_page | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"country\">\n            <span [pTooltip]=\"visits.country\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.country | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"region\">\n            <span [pTooltip]=\"visits.region\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.region | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"city\">\n            <span [pTooltip]=\"visits.city\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.city | textTruncate: 20 }}\n            </span></td>\n            <td data-head=\"OS\">{{ visits.os }}</td>\n            <td data-head=\"User\">\n              @if (visits?.user_id) {\n                <span>\n                  @if (visits?.user) {\n                    <span><a [routerLink]=\"['/members', visits?.user?.slug]\">{{ visits?.user?.first_name }} {{ visits?.user?.last_name }}</a></span>\n                  }\n                  @if (!visits?.user) {\n                    <span>{{ visits?.user_id }}</span>\n                  }\n                </span>\n              }\n            </td>\n            <td data-head=\"Started At\">{{ visits.started_at | dateFormat : 'datetime' }}</td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n          </pw-no-data>\n        </div>\n      }\n      @if (data.object_count !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n      }\n    </div>\n  </div>\n  @if (!loading && data.unfiltered_count === 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVistitsDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
+            args: [{ selector: 'pw-ahoy-visits', standalone: false, 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\">Ahoy Visits</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.visits\"\n      [paginator]=\"data.object_count !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [sortField]=\"'started_at'\"\n      [sortOrder]=\"-1\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              [placeholder]=\"'Filter by service'\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-visits-filter-users\"\n              #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"yy-M-dd\"\n              >\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"yy-M-dd\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"ahoy-visits-search\" class=\"visually-hidden\">Search Visits</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"ahoy-visits-search\"\n                name=\"ahoy-visits-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search visits...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"browser\">\n            {{ 'Admin.Tracking.Browser' | transloco }}\n            <p-sortIcon field=\"browser\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"device_type\">\n            {{ 'Admin.Tracking.DeviceType' | transloco }}\n            <p-sortIcon field=\"device_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"ip\">\n            {{ 'Admin.Tracking.Ip' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"referring_domain\">\n            {{ 'Admin.Tracking.Domain' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"landing_page\">\n            {{ 'Admin.Tracking.LandingPage' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"country\">\n            {{ 'Admin.Tracking.Country' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"region\">\n            {{ 'Admin.Tracking.Region' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"city\">\n            {{ 'Admin.Tracking.City' | transloco }}\n            <p-sortIcon field=\"ip\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"os\">\n            {{ 'Admin.Tracking.Os' | transloco }}\n            <p-sortIcon field=\"os\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">\n            {{ 'Admin.Tracking.User' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"started_at\">\n            {{ 'Admin.Tracking.StartedAt' | transloco }}\n            <p-sortIcon field=\"started_at\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-visits>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Browser\">{{ visits.browser }}</td>\n          <td data-head=\"Device Type\">{{ visits.device_type }}</td>\n          <td data-head=\"IP\">{{ visits.ip }}</td>\n          <td data-head=\"referring_domain\">\n            <span [pTooltip]=\"visits.referring_domain\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.referring_domain | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"landing_page\">\n            <span [pTooltip]=\"visits.landing_page\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.landing_page | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"country\">\n            <span [pTooltip]=\"visits.country\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.country | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"region\">\n            <span [pTooltip]=\"visits.region\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.region | textTruncate: 20 }}\n            </span>\n          </td>\n          <td data-head=\"city\">\n            <span [pTooltip]=\"visits.city\"\n              tooltipStyleClass=\"custom-tooltip\"\n              tooltipPosition=\"top\"  appendTo=\"body\"> {{ visits.city | textTruncate: 20 }}\n            </span></td>\n            <td data-head=\"OS\">{{ visits.os }}</td>\n            <td data-head=\"User\">\n              @if (visits?.user_id) {\n                <span>\n                  @if (visits?.user) {\n                    <span><a [routerLink]=\"['/members', visits?.user?.slug]\">{{ visits?.user?.first_name }} {{ visits?.user?.last_name }}</a></span>\n                  }\n                  @if (!visits?.user) {\n                    <span>{{ visits?.user_id }}</span>\n                  }\n                </span>\n              }\n            </td>\n            <td data-head=\"Started At\">{{ visits.started_at | dateFormat : 'datetime' }}</td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n          </pw-no-data>\n        </div>\n      }\n      @if (data.object_count !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n      }\n    </div>\n  </div>\n  @if (!loading && data.unfiltered_count === 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVistitsDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.AhoyService }, { type: i1.AdminDataService }, { type: i0.ChangeDetectorRef }] });
 
 class EventsComponent extends AppBaseComponent {
@@ -10254,11 +10273,11 @@ class EventsComponent extends AppBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EventsComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$1.AhoyService }, { token: i1.AdminDataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: EventsComponent, isStandalone: false, selector: "pw-events", 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\">Events</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.events\"\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      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter\">\n          <div *rbacAllow=\"'SuperAdmin'\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div>\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"events-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div>\n            <p-datepicker inputId=\"events-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div>\n            <p-datepicker inputId=\"events-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div>\n            <label for=\"events-search\" class=\"visually-hidden\">Search Events</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"events-search\"\n                name=\"events-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search events...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"created_at\">\n            {{ 'Admin.Tracking.CreatedAt' | transloco }}\n            <p-sortIcon field=\"created_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"event_type\">\n            {{ 'Admin.Tracking.EventType' | transloco }}\n            <p-sortIcon field=\"event_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"related_entity_type\">\n            {{ 'Admin.Tracking.EntityType' | transloco }}\n            <p-sortIcon field=\"related_entity_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"updated_at\">\n            {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n            <p-sortIcon field=\"updated_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"user_id\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"user_id\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-events>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Created At\">{{ events.created_at | dateFormat: 'datetime' }}</td>\n          <td data-head=\"Event Type\">{{ events.event_type }}</td>\n          <td data-head=\"Entity Type\">{{ events.related_entity_type }}</td>\n          <td data-head=\"Updated At\">{{ events.updated_at | dateFormat : 'datetime'}}</td>\n          <td data-head=\"User\">\n            @if (events?.user_id) {\n              <span>\n                @if (events?.user) {\n                  <span><a [routerLink]=\"['/members', events?.user?.slug]\">{{ events?.user?.first_name }} {{ events?.user?.last_name }}</a></span>\n                }\n                @if (!events?.user) {\n                  <span>{{ events?.user_id }}</span>\n                }\n              </span>\n            }\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i5$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: EventsComponent, isStandalone: false, selector: "pw-events", 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\">Events</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.events\"\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      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter\">\n          <div *rbacAllow=\"'SuperAdmin'\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div>\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"events-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div>\n            <p-datepicker inputId=\"events-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div>\n            <p-datepicker inputId=\"events-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div>\n            <label for=\"events-search\" class=\"visually-hidden\">Search Events</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"events-search\"\n                name=\"events-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search events...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"created_at\">\n            {{ 'Admin.Tracking.CreatedAt' | transloco }}\n            <p-sortIcon field=\"created_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"event_type\">\n            {{ 'Admin.Tracking.EventType' | transloco }}\n            <p-sortIcon field=\"event_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"related_entity_type\">\n            {{ 'Admin.Tracking.EntityType' | transloco }}\n            <p-sortIcon field=\"related_entity_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"updated_at\">\n            {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n            <p-sortIcon field=\"updated_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"user_id\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"user_id\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-events>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Created At\">{{ events.created_at | dateFormat: 'datetime' }}</td>\n          <td data-head=\"Event Type\">{{ events.event_type }}</td>\n          <td data-head=\"Entity Type\">{{ events.related_entity_type }}</td>\n          <td data-head=\"Updated At\">{{ events.updated_at | dateFormat : 'datetime'}}</td>\n          <td data-head=\"User\">\n            @if (events?.user_id) {\n              <span>\n                @if (events?.user) {\n                  <span><a [routerLink]=\"['/members', events?.user?.slug]\">{{ events?.user?.first_name }} {{ events?.user?.last_name }}</a></span>\n                }\n                @if (!events?.user) {\n                  <span>{{ events?.user_id }}</span>\n                }\n              </span>\n            }\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i5$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EventsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-events', standalone: false, 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\">Events</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.events\"\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      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter\">\n          <div *rbacAllow=\"'SuperAdmin'\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div>\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"events-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div>\n            <p-datepicker inputId=\"events-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div>\n            <p-datepicker inputId=\"events-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div>\n            <label for=\"events-search\" class=\"visually-hidden\">Search Events</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"events-search\"\n                name=\"events-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search events...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"created_at\">\n            {{ 'Admin.Tracking.CreatedAt' | transloco }}\n            <p-sortIcon field=\"created_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"event_type\">\n            {{ 'Admin.Tracking.EventType' | transloco }}\n            <p-sortIcon field=\"event_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"related_entity_type\">\n            {{ 'Admin.Tracking.EntityType' | transloco }}\n            <p-sortIcon field=\"related_entity_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"updated_at\">\n            {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n            <p-sortIcon field=\"updated_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"user_id\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"user_id\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-events>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Created At\">{{ events.created_at | dateFormat: 'datetime' }}</td>\n          <td data-head=\"Event Type\">{{ events.event_type }}</td>\n          <td data-head=\"Entity Type\">{{ events.related_entity_type }}</td>\n          <td data-head=\"Updated At\">{{ events.updated_at | dateFormat : 'datetime'}}</td>\n          <td data-head=\"User\">\n            @if (events?.user_id) {\n              <span>\n                @if (events?.user) {\n                  <span><a [routerLink]=\"['/members', events?.user?.slug]\">{{ events?.user?.first_name }} {{ events?.user?.last_name }}</a></span>\n                }\n                @if (!events?.user) {\n                  <span>{{ events?.user_id }}</span>\n                }\n              </span>\n            }\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
+            args: [{ selector: 'pw-events', standalone: false, 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\">Events</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.events\"\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      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter\">\n          <div *rbacAllow=\"'SuperAdmin'\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div>\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"events-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div>\n            <p-datepicker inputId=\"events-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div>\n            <p-datepicker inputId=\"events-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div>\n            <label for=\"events-search\" class=\"visually-hidden\">Search Events</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"events-search\"\n                name=\"events-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search events...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"created_at\">\n            {{ 'Admin.Tracking.CreatedAt' | transloco }}\n            <p-sortIcon field=\"created_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"event_type\">\n            {{ 'Admin.Tracking.EventType' | transloco }}\n            <p-sortIcon field=\"event_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"related_entity_type\">\n            {{ 'Admin.Tracking.EntityType' | transloco }}\n            <p-sortIcon field=\"related_entity_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"updated_at\">\n            {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n            <p-sortIcon field=\"updated_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"user_id\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"user_id\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-events>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Created At\">{{ events.created_at | dateFormat: 'datetime' }}</td>\n          <td data-head=\"Event Type\">{{ events.event_type }}</td>\n          <td data-head=\"Entity Type\">{{ events.related_entity_type }}</td>\n          <td data-head=\"Updated At\">{{ events.updated_at | dateFormat : 'datetime'}}</td>\n          <td data-head=\"User\">\n            @if (events?.user_id) {\n              <span>\n                @if (events?.user) {\n                  <span><a [routerLink]=\"['/members', events?.user?.slug]\">{{ events?.user?.first_name }} {{ events?.user?.last_name }}</a></span>\n                }\n                @if (!events?.user) {\n                  <span>{{ events?.user_id }}</span>\n                }\n              </span>\n            }\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.AhoyService }, { type: i1.AdminDataService }] });
 
 class TrackingComponent {
@@ -10479,11 +10498,11 @@ class VersionsComponent extends AppBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: VersionsComponent, deps: [{ token: i0.Injector }, { token: i1$1.AhoyService }, { token: i2.NgbModal }, { token: i1.AdminDataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: VersionsComponent, isStandalone: false, selector: "pw-versions", 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\">Versions</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.versions\"\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      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"versions-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"versions-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2 \">\n            <p-datepicker inputId=\"versions-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"versions-search\" class=\"visually-hidden\">Search Versions</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"versions-search\"\n                name=\"versions-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search versions...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"author\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"author\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"created_at\">\n            {{ 'Admin.Tracking.CreatedAt' | transloco }}\n            <p-sortIcon field=\"created_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"event\">\n            {{ 'Admin.Tracking.Event' | transloco }}\n            <p-sortIcon field=\"event\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"item_type\">\n            {{ 'Admin.Tracking.ItemType' | transloco }}\n            <p-sortIcon field=\"item_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"item_id\">\n            {{ 'Admin.Tracking.ItemId' | transloco }}\n            <p-sortIcon field=\"item_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"object\">\n            {{ 'Admin.Tracking.Object' | transloco }}\n            <p-sortIcon field=\"object\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"updated_at\">\n            {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n            <p-sortIcon field=\"updated_at\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-version>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"User\">\n            @if (version?.author) {\n              <span><a [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author?.first_name }}\n              {{ version?.author?.last_name }}</a></span>\n            }\n            @if (!version?.author && version?.whoDoneIt) {\n              <span>{{\n                version?.whoDoneIt\n              }}</span>\n            }\n          </td>\n          <td data-head=\"Created At\">{{ version.created_at | dateFormat: 'datetime' }}</td>\n          <td data-head=\"Event\">\n            <span class=\"badge\"\n              color=\"warning\"\n              [appDynamicBadge]=\"{\n                                        itemsArray: events,\n                                        item: version?.event\n                                    }\">{{version?.event}}</span>\n          </td>\n          <td data-head=\"Item Type\">{{ version.item_type }}</td>\n          <td data-head=\"Item Id\">{{ version.item_id }}</td>\n          <td data-head=\"Object\">\n            <span (click)=\"openObjectModal(objModal, version?.object)\"\n              (keydown.enter)=\"openObjectModal(objModal, version?.object)\"\n            class=\"badge bg-info cursor-pointer\">Open Object</span>\n          </td>\n          <td data-head=\"Updated At\">{{ version.updated_at | dateFormat: 'datetime' }}</td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVersionsDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- Object Modal -->\n<ng-template #objModal\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\">{{ 'Admin.Tracking.Object' | transloco }}</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    @if (activeObject) {\n      <div>\n        <ngx-json-viewer [json]=\"activeObject\"\n        [expanded]=\"false\"></ngx-json-viewer>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i11.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "component", type: i5$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: VersionsComponent, isStandalone: false, selector: "pw-versions", 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\">Versions</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.versions\"\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      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"versions-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"versions-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2 \">\n            <p-datepicker inputId=\"versions-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"versions-search\" class=\"visually-hidden\">Search Versions</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"versions-search\"\n                name=\"versions-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search versions...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"author\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"author\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"created_at\">\n            {{ 'Admin.Tracking.CreatedAt' | transloco }}\n            <p-sortIcon field=\"created_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"event\">\n            {{ 'Admin.Tracking.Event' | transloco }}\n            <p-sortIcon field=\"event\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"item_type\">\n            {{ 'Admin.Tracking.ItemType' | transloco }}\n            <p-sortIcon field=\"item_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"item_id\">\n            {{ 'Admin.Tracking.ItemId' | transloco }}\n            <p-sortIcon field=\"item_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"object\">\n            {{ 'Admin.Tracking.Object' | transloco }}\n            <p-sortIcon field=\"object\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"updated_at\">\n            {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n            <p-sortIcon field=\"updated_at\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-version>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"User\">\n            @if (version?.author) {\n              <span><a [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author?.first_name }}\n              {{ version?.author?.last_name }}</a></span>\n            }\n            @if (!version?.author && version?.whoDoneIt) {\n              <span>{{\n                version?.whoDoneIt\n              }}</span>\n            }\n          </td>\n          <td data-head=\"Created At\">{{ version.created_at | dateFormat: 'datetime' }}</td>\n          <td data-head=\"Event\">\n            <span class=\"badge\"\n              color=\"warning\"\n              [appDynamicBadge]=\"{\n                                        itemsArray: events,\n                                        item: version?.event\n                                    }\">{{version?.event}}</span>\n          </td>\n          <td data-head=\"Item Type\">{{ version.item_type }}</td>\n          <td data-head=\"Item Id\">{{ version.item_id }}</td>\n          <td data-head=\"Object\">\n            <span (click)=\"openObjectModal(objModal, version?.object)\"\n              (keydown.enter)=\"openObjectModal(objModal, version?.object)\"\n            class=\"badge bg-info cursor-pointer\">Open Object</span>\n          </td>\n          <td data-head=\"Updated At\">{{ version.updated_at | dateFormat: 'datetime' }}</td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVersionsDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- Object Modal -->\n<ng-template #objModal\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\">{{ 'Admin.Tracking.Object' | transloco }}</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    @if (activeObject) {\n      <div>\n        <ngx-json-viewer [json]=\"activeObject\"\n        [expanded]=\"false\"></ngx-json-viewer>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i11.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "component", type: i5$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: VersionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-versions', standalone: false, 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\">Versions</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.versions\"\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      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"versions-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"versions-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2 \">\n            <p-datepicker inputId=\"versions-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"versions-search\" class=\"visually-hidden\">Search Versions</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"versions-search\"\n                name=\"versions-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search versions...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"author\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"author\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"created_at\">\n            {{ 'Admin.Tracking.CreatedAt' | transloco }}\n            <p-sortIcon field=\"created_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"event\">\n            {{ 'Admin.Tracking.Event' | transloco }}\n            <p-sortIcon field=\"event\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"item_type\">\n            {{ 'Admin.Tracking.ItemType' | transloco }}\n            <p-sortIcon field=\"item_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"item_id\">\n            {{ 'Admin.Tracking.ItemId' | transloco }}\n            <p-sortIcon field=\"item_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"object\">\n            {{ 'Admin.Tracking.Object' | transloco }}\n            <p-sortIcon field=\"object\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"updated_at\">\n            {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n            <p-sortIcon field=\"updated_at\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-version>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"User\">\n            @if (version?.author) {\n              <span><a [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author?.first_name }}\n              {{ version?.author?.last_name }}</a></span>\n            }\n            @if (!version?.author && version?.whoDoneIt) {\n              <span>{{\n                version?.whoDoneIt\n              }}</span>\n            }\n          </td>\n          <td data-head=\"Created At\">{{ version.created_at | dateFormat: 'datetime' }}</td>\n          <td data-head=\"Event\">\n            <span class=\"badge\"\n              color=\"warning\"\n              [appDynamicBadge]=\"{\n                                        itemsArray: events,\n                                        item: version?.event\n                                    }\">{{version?.event}}</span>\n          </td>\n          <td data-head=\"Item Type\">{{ version.item_type }}</td>\n          <td data-head=\"Item Id\">{{ version.item_id }}</td>\n          <td data-head=\"Object\">\n            <span (click)=\"openObjectModal(objModal, version?.object)\"\n              (keydown.enter)=\"openObjectModal(objModal, version?.object)\"\n            class=\"badge bg-info cursor-pointer\">Open Object</span>\n          </td>\n          <td data-head=\"Updated At\">{{ version.updated_at | dateFormat: 'datetime' }}</td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVersionsDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- Object Modal -->\n<ng-template #objModal\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\">{{ 'Admin.Tracking.Object' | transloco }}</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    @if (activeObject) {\n      <div>\n        <ngx-json-viewer [json]=\"activeObject\"\n        [expanded]=\"false\"></ngx-json-viewer>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
+            args: [{ selector: 'pw-versions', standalone: false, 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\">Versions</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"data.versions\"\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      <ng-template pTemplate=\"caption\">\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2 mb-2 mb-md-0\">\n            <p-select\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              styleClass=\"tracking-service-select pw-filter-select\"\n              panelStyleClass=\"tracking-service-select-panel\"\n              scrollHeight=\"220px\"\n              [placeholder]=\"'Filter by service'\"\n              optionLabel=\"name\"\n              optionValue=\"name\">\n            </p-select>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"versions-filter-users\" #multiSelector [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter by users\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\"\n              [lazy]=\"true\"\n              (scroll)=\"onScroll($event)\"\n              (onPanelShow)=\"onPanelShow()\"\n              [loading]=\"userLoading\"\n              (onFilter)=\"handleFilter($event)\"\n              >\n            </p-multiSelect>\n          </div>\n          <div class=\"col-sm-2\">\n            <p-datepicker inputId=\"versions-start-date\" [showTime]=\"true\"\n              [appendTo]=\"'body'\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'Start Date'\"\n              [(ngModel)]=\"startDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col-sm-2 \">\n            <p-datepicker inputId=\"versions-end-date\" [appendTo]=\"'body'\"\n              [showTime]=\"true\"\n              (onSelect)=\"onDateSelection()\"\n              [placeholder]=\"'End Date'\"\n              [(ngModel)]=\"endDate\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\">\n            </p-datepicker>\n          </div>\n          <div class=\"col d-flex align-items-center\">\n            <label for=\"versions-search\" class=\"visually-hidden\">Search Versions</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"versions-search\"\n                name=\"versions-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search versions...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"form-control bg-white\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"author\">\n            {{ 'Admin.Tracking.User' | transloco }}\n            <p-sortIcon field=\"author\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"created_at\">\n            {{ 'Admin.Tracking.CreatedAt' | transloco }}\n            <p-sortIcon field=\"created_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"event\">\n            {{ 'Admin.Tracking.Event' | transloco }}\n            <p-sortIcon field=\"event\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"item_type\">\n            {{ 'Admin.Tracking.ItemType' | transloco }}\n            <p-sortIcon field=\"item_type\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"item_id\">\n            {{ 'Admin.Tracking.ItemId' | transloco }}\n            <p-sortIcon field=\"item_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"object\">\n            {{ 'Admin.Tracking.Object' | transloco }}\n            <p-sortIcon field=\"object\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"updated_at\">\n            {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n            <p-sortIcon field=\"updated_at\"></p-sortIcon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-version>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"User\">\n            @if (version?.author) {\n              <span><a [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author?.first_name }}\n              {{ version?.author?.last_name }}</a></span>\n            }\n            @if (!version?.author && version?.whoDoneIt) {\n              <span>{{\n                version?.whoDoneIt\n              }}</span>\n            }\n          </td>\n          <td data-head=\"Created At\">{{ version.created_at | dateFormat: 'datetime' }}</td>\n          <td data-head=\"Event\">\n            <span class=\"badge\"\n              color=\"warning\"\n              [appDynamicBadge]=\"{\n                                        itemsArray: events,\n                                        item: version?.event\n                                    }\">{{version?.event}}</span>\n          </td>\n          <td data-head=\"Item Type\">{{ version.item_type }}</td>\n          <td data-head=\"Item Id\">{{ version.item_id }}</td>\n          <td data-head=\"Object\">\n            <span (click)=\"openObjectModal(objModal, version?.object)\"\n              (keydown.enter)=\"openObjectModal(objModal, version?.object)\"\n            class=\"badge bg-info cursor-pointer\">Open Object</span>\n          </td>\n          <td data-head=\"Updated At\">{{ version.updated_at | dateFormat: 'datetime' }}</td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if ( data.object_count === 0 && data.unfiltered_count !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (data.object_count !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n    }\n  </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVersionsDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- Object Modal -->\n<ng-template #objModal\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\">{{ 'Admin.Tracking.Object' | transloco }}</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    @if (activeObject) {\n      <div>\n        <ngx-json-viewer [json]=\"activeObject\"\n        [expanded]=\"false\"></ngx-json-viewer>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.AhoyService }, { type: i2.NgbModal }, { type: i1.AdminDataService }, { type: i0.ChangeDetectorRef }] });
 
 class UserDetailsComponent extends AppBaseComponent {
@@ -10995,11 +11014,11 @@ class UserListComponent extends UsersListBaseComponent {
         this.adminService.remove2fa(this.remove2faUserId, this.subscriptionId).subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", 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 }, { token: i3$2.CollapsibleSidebarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: UserListComponent, isStandalone: false, 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> Add User\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\">\n  @if (!isLoaded) {\n    <p-progressSpinner> </p-progressSpinner>\n  }\n</div>\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [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 styleClass=\"pw-filter-select\" inputId=\"users-list-filter-role-product\"\n              [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          @if (selectedOption) {\n            <div class=\"col-4\"\n              >\n              <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"users-list-filter-criteria\"\n                [options]=\"searchDataSource\"\n                (onChange)=\"onSearchCriteria($event)\"\n                [showToggleAll]=\"true\"\n                [(ngModel)]=\"criteria\"\n                [showHeader]=\"true\"\n                placeholder=\"Filter by {{ selectedOption.value }}s\"\n                maxSelectedLabels=\"2\"\n                appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n          }\n          <div class=\"text-end\">\n            <label for=\"users-list-search\" class=\"visually-hidden\">Search User</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"users-list-search\"\n                name=\"users-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search users...\"\n                data-cy=\"user-search\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"wd-90\" />\n            </p-iconfield>\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            @if (user?.alpha) {\n              <span\n                [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n              </span>\n            }\n            @if (user?.beta) {\n              <span class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n              </span>\n            }\n            @if (user?.cognito_sso_activated) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-cloud success\" ></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"Email\">{{ user.email }}</td>\n          <td data-head=\"Slug\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\">\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: user?.has_password\n                            }\"\n              color=\"success-danger\"\n            class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n            @if (user?.blocked) {\n              <span class=\"ms-2\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': user?.sessions_last_month < 3\n                          }\">{{ user?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Last Login\">\n            @if (user?.current_sign_in_at) {\n              <span>\n                {{ user.current_sign_in_at  | dateFormat }}\n              </span>\n            } @else {\n              {{ user.last_sign_in_at | dateFormat }}\n            }\n          </td>\n          <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fas fa-people-arrows fa-lg\"\n                  (click)=\"onImpersonate(user)\"\n                  (keydown.enter)=\"onImpersonate(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n              @if (user?.enable_two_factor_authenticator) {\n                <li pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\n                  (click)=\"disable2fa(user?.id)\"\n                  (keydown.enter)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              @if (currentUser && user.id !== currentUser.id) {\n                <li pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fa fa-trash delete-icon\"\n                  (keydown.enter)=\"onDelete(user)\"\n                  (keydown.space)=\"onDelete(user)\"\n                  (click)=\"onDelete(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.search-input input{width:100%}.w-150{width:150px}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: UserListComponent, isStandalone: false, 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> Add User\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\">\n  @if (!isLoaded) {\n    <p-progressSpinner> </p-progressSpinner>\n  }\n</div>\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [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 styleClass=\"pw-filter-select\" inputId=\"users-list-filter-role-product\"\n              [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          @if (selectedOption) {\n            <div class=\"col-4\"\n              >\n              <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"users-list-filter-criteria\"\n                [options]=\"searchDataSource\"\n                (onChange)=\"onSearchCriteria($event)\"\n                [showToggleAll]=\"true\"\n                [(ngModel)]=\"criteria\"\n                [showHeader]=\"true\"\n                placeholder=\"Filter by {{ selectedOption.value }}s\"\n                maxSelectedLabels=\"2\"\n                appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n          }\n          <div class=\"text-end\">\n            <label for=\"users-list-search\" class=\"visually-hidden\">Search User</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"users-list-search\"\n                name=\"users-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search users...\"\n                data-cy=\"user-search\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"wd-90\" />\n            </p-iconfield>\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            @if (user?.alpha) {\n              <span\n                [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n              </span>\n            }\n            @if (user?.beta) {\n              <span class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n              </span>\n            }\n            @if (user?.cognito_sso_activated) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-cloud success\" ></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"Email\">{{ user.email }}</td>\n          <td data-head=\"Slug\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\">\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: user?.has_password\n                            }\"\n              color=\"success-danger\"\n            class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n            @if (user?.blocked) {\n              <span class=\"ms-2\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': user?.sessions_last_month < 3\n                          }\">{{ user?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Last Login\">\n            @if (user?.current_sign_in_at) {\n              <span>\n                {{ user.current_sign_in_at  | dateFormat }}\n              </span>\n            } @else {\n              {{ user.last_sign_in_at | dateFormat }}\n            }\n          </td>\n          <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fas fa-people-arrows fa-lg\"\n                  (click)=\"onImpersonate(user)\"\n                  (keydown.enter)=\"onImpersonate(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n              @if (user?.enable_two_factor_authenticator) {\n                <li pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\n                  (click)=\"disable2fa(user?.id)\"\n                  (keydown.enter)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              @if (currentUser && user.id !== currentUser.id) {\n                <li pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fa fa-trash delete-icon\"\n                  (keydown.enter)=\"onDelete(user)\"\n                  (keydown.space)=\"onDelete(user)\"\n                  (click)=\"onDelete(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.search-input input{width:100%}.w-150{width:150px}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-user-list', standalone: false, 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> Add User\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\">\n  @if (!isLoaded) {\n    <p-progressSpinner> </p-progressSpinner>\n  }\n</div>\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [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 styleClass=\"pw-filter-select\" inputId=\"users-list-filter-role-product\"\n              [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          @if (selectedOption) {\n            <div class=\"col-4\"\n              >\n              <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"users-list-filter-criteria\"\n                [options]=\"searchDataSource\"\n                (onChange)=\"onSearchCriteria($event)\"\n                [showToggleAll]=\"true\"\n                [(ngModel)]=\"criteria\"\n                [showHeader]=\"true\"\n                placeholder=\"Filter by {{ selectedOption.value }}s\"\n                maxSelectedLabels=\"2\"\n                appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n          }\n          <div class=\"text-end\">\n            <label for=\"users-list-search\" class=\"visually-hidden\">Search User</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"users-list-search\"\n                name=\"users-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search users...\"\n                data-cy=\"user-search\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"wd-90\" />\n            </p-iconfield>\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            @if (user?.alpha) {\n              <span\n                [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n              </span>\n            }\n            @if (user?.beta) {\n              <span class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n              </span>\n            }\n            @if (user?.cognito_sso_activated) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-cloud success\" ></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"Email\">{{ user.email }}</td>\n          <td data-head=\"Slug\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\">\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: user?.has_password\n                            }\"\n              color=\"success-danger\"\n            class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n            @if (user?.blocked) {\n              <span class=\"ms-2\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': user?.sessions_last_month < 3\n                          }\">{{ user?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Last Login\">\n            @if (user?.current_sign_in_at) {\n              <span>\n                {{ user.current_sign_in_at  | dateFormat }}\n              </span>\n            } @else {\n              {{ user.last_sign_in_at | dateFormat }}\n            }\n          </td>\n          <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fas fa-people-arrows fa-lg\"\n                  (click)=\"onImpersonate(user)\"\n                  (keydown.enter)=\"onImpersonate(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n              @if (user?.enable_two_factor_authenticator) {\n                <li pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\n                  (click)=\"disable2fa(user?.id)\"\n                  (keydown.enter)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              @if (currentUser && user.id !== currentUser.id) {\n                <li pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fa fa-trash delete-icon\"\n                  (keydown.enter)=\"onDelete(user)\"\n                  (keydown.space)=\"onDelete(user)\"\n                  (click)=\"onDelete(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--public-btn-radius: 24px}.search-input input{width:100%}.w-150{width:150px}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\n"] }]
+            args: [{ selector: 'pw-admin-user-list', standalone: false, 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> Add User\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\">\n  @if (!isLoaded) {\n    <p-progressSpinner> </p-progressSpinner>\n  }\n</div>\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [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 styleClass=\"pw-filter-select\" inputId=\"users-list-filter-role-product\"\n              [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          @if (selectedOption) {\n            <div class=\"col-4\"\n              >\n              <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"users-list-filter-criteria\"\n                [options]=\"searchDataSource\"\n                (onChange)=\"onSearchCriteria($event)\"\n                [showToggleAll]=\"true\"\n                [(ngModel)]=\"criteria\"\n                [showHeader]=\"true\"\n                placeholder=\"Filter by {{ selectedOption.value }}s\"\n                maxSelectedLabels=\"2\"\n                appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n          }\n          <div class=\"text-end\">\n            <label for=\"users-list-search\" class=\"visually-hidden\">Search User</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"users-list-search\"\n                name=\"users-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search users...\"\n                data-cy=\"user-search\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"wd-90\" />\n            </p-iconfield>\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            @if (user?.alpha) {\n              <span\n                [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n              </span>\n            }\n            @if (user?.beta) {\n              <span class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n              </span>\n            }\n            @if (user?.cognito_sso_activated) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-cloud success\" ></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"Email\">{{ user.email }}</td>\n          <td data-head=\"Slug\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\">\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: user?.has_password\n                            }\"\n              color=\"success-danger\"\n            class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n            @if (user?.blocked) {\n              <span class=\"ms-2\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': user?.sessions_last_month < 3\n                          }\">{{ user?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Last Login\">\n            @if (user?.current_sign_in_at) {\n              <span>\n                {{ user.current_sign_in_at  | dateFormat }}\n              </span>\n            } @else {\n              {{ user.last_sign_in_at | dateFormat }}\n            }\n          </td>\n          <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fas fa-people-arrows fa-lg\"\n                  (click)=\"onImpersonate(user)\"\n                  (keydown.enter)=\"onImpersonate(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n              @if (user?.enable_two_factor_authenticator) {\n                <li pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\n                  (click)=\"disable2fa(user?.id)\"\n                  (keydown.enter)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              @if (currentUser && user.id !== currentUser.id) {\n                <li pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fa fa-trash delete-icon\"\n                  (keydown.enter)=\"onDelete(user)\"\n                  (keydown.space)=\"onDelete(user)\"\n                  (click)=\"onDelete(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.search-input input{width:100%}.w-150{width:150px}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\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 }, { type: i3$2.CollapsibleSidebarService }], propDecorators: { passwordValidationModalForUserDelete: [{
                 type: ViewChild,
                 args: ['passwordValidationModalForUserDelete', { static: false }]