@posiwise/admin-module 0.0.261 → 0.0.263

package/fesm2022/posiwise-admin-module.mjs

@@ -108,7 +108,7 @@ const ROUTERS = {
 	subscriptionProductDetails: `${baseUrl}/products/subscription/`,
 	tipsDetails: `${baseUrl}/tips/`,
 	tosAndPrivacyDetails: `${baseUrl}/tos/`,
-	tosAndPrivacyView: `/privacy-and-tos/`,
+	tosAndPrivacyView: `/privacy-policy`,
 	usersDetails: `${baseUrl}/users/`,
 	domainConfig: `${baseUrl}/domain-config/`,
 	domainConfigDetails: `${baseUrl}/domain-config/`,
@@ -1926,7 +1926,7 @@ var ContactUsListComponent = class ContactUsListComponent extends AppBaseCompone
 			selector: "pw-contact-us-list",
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Contact Us</h2>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p>The <strong>Contact US</strong> module shows all submissions from the contact forms embedded on select landing pages.<br/>\n  It’s your central hub to track and follow up with interested users or potential leads.</p>\n</div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"6\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.contact_request\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\"\n      stateKey=\"pw-table.contact-us-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template #caption>\n      <div class=\"search-contact\">\n        <div class=\"col-12 col-sm-3\">\n          <p-select class=\"pw-filter-select\"\n            [options]=\"[\n              { label: 'Filter by status', value: null },\n              { label: 'Open', value: false },\n              { label: 'Closed', value: true }\n            ]\"\n            placeholder=\"Filter by status\"\n            (onChange)=\"filterClosed($event.value)\"\n            appendTo=\"body\">\n          </p-select>\n        </div>\n        <div class=\"text-end ms-auto\">\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=\"contact-us-list-search\"\n              name=\"contact-us-list-search\"\n              pInputText\n              placeholder=\"Search messages...\"\n              [(ngModel)]=\"searchText\"\n              (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n              aria-label=\"Search messages...\" />\n          </p-iconfield>\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"created_at\">\n          {{ 'Admin.ContactUs.CreatedAt' | transloco }}\n          <p-sort-icon field=\"created_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sort-icon field=\"name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sort-icon field=\"email\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"subject\">\n          {{ 'Admin.ContactUs.Subject' | transloco }}\n          <p-sort-icon field=\"subject\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"message\">\n          {{ 'Admin.ContactUs.Message' | transloco }}\n          <p-sort-icon field=\"message\"></p-sort-icon>\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"name\">{{ item?.name }}</td>\n        <td data-head=\"email\">\n          <a href=\"mailto:{{ item?.email }}\">{{ item?.email }}</a>\n        </td>\n        <td data-head=\"subject\">{{ item?.subject }}</td>\n        <td data-head=\"message\">\n          <span\n            [pTooltip]=\"item?.message\"\n            appendTo=\"body\"\n            tooltipStyleClass=\"custom-tooltip\"\n            tooltipPosition=\"bottom\"\n            >\n            {{ item?.message | textTruncate: 200 }}\n          </span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            @if (!item.closed) {\n              <li\n                pTooltip=\"Close\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"toggleRecord(item.id, true)\"\n                (click)=\"toggleRecord(item.id, true)\">\n                <i class=\"fa fa-times delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            }\n            @if (item.closed) {\n              <li\n                pTooltip=\"Re Open\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"onKeyDown($event, item.id)\"\n                (click)=\"toggleRecord(item.id, false)\">\n                <i class=\"fa fa-retweet edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n            }\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]=\"tt?.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=\"No Contact Requests\"> </pw-no-data>\n  </div>\n}\n",
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Contact Us</h2>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p>The <strong>Contact US</strong> module shows all submissions from the contact forms embedded on select landing pages.<br/>\n  It’s your central hub to track and follow up with interested users or potential leads.</p>\n</div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"6\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.contact_request\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\"\n      stateKey=\"pw-table.contact-us-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template #caption>\n      <div class=\"search-contact\">\n        <div class=\"col-12 col-sm-3\">\n          <p-select class=\"pw-filter-select\"\n            [options]=\"[\n              { label: 'Filter by status', value: null },\n              { label: 'Open', value: false },\n              { label: 'Closed', value: true }\n            ]\"\n            placeholder=\"Filter by status\"\n            (onChange)=\"filterClosed($event.value)\"\n            appendTo=\"body\">\n          </p-select>\n        </div>\n        <div class=\"text-end ms-auto\">\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=\"contact-us-list-search\"\n              name=\"contact-us-list-search\"\n              pInputText\n              placeholder=\"Search messages...\"\n              [(ngModel)]=\"searchText\"\n              (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n              aria-label=\"Search messages...\" />\n          </p-iconfield>\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"created_at\">\n          {{ 'Admin.ContactUs.CreatedAt' | transloco }}\n          <p-sort-icon field=\"created_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sort-icon field=\"name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sort-icon field=\"email\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"subject\">\n          {{ 'Admin.ContactUs.Subject' | transloco }}\n          <p-sort-icon field=\"subject\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"message\">\n          {{ 'Admin.ContactUs.Message' | transloco }}\n          <p-sort-icon field=\"message\"></p-sort-icon>\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"created_at\" [attr.data-label]=\"'Admin.ContactUs.CreatedAt' | transloco\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"name\" [attr.data-label]=\"'Label.Name' | transloco\">{{ item?.name }}</td>\n        <td data-head=\"email\" [attr.data-label]=\"'Label.Email' | transloco\">\n          <a href=\"mailto:{{ item?.email }}\">{{ item?.email }}</a>\n        </td>\n        <td data-head=\"subject\" [attr.data-label]=\"'Admin.ContactUs.Subject' | transloco\">{{ item?.subject }}</td>\n        <td data-head=\"message\" [attr.data-label]=\"'Admin.ContactUs.Message' | transloco\">\n          <span\n            [pTooltip]=\"item?.message\"\n            appendTo=\"body\"\n            tooltipStyleClass=\"custom-tooltip\"\n            tooltipPosition=\"bottom\"\n            >\n            {{ item?.message | textTruncate: 200 }}\n          </span>\n        </td>\n        <td data-head=\"Action\" [attr.data-label]=\"'Label.Actions' | transloco\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            @if (!item.closed) {\n              <li\n                pTooltip=\"Close\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"toggleRecord(item.id, true)\"\n                (click)=\"toggleRecord(item.id, true)\">\n                <i class=\"fa fa-times delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            }\n            @if (item.closed) {\n              <li\n                pTooltip=\"Re Open\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"onKeyDown($event, item.id)\"\n                (click)=\"toggleRecord(item.id, false)\">\n                <i class=\"fa fa-retweet edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n            }\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]=\"tt?.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=\"No Contact Requests\"> </pw-no-data>\n  </div>\n}\n",
 			styles: [".search-contact{display:flex;justify-content:space-between}@media(min-width:320px)and (max-width:720px){.search-contact{display:block}}\n"],
 			dependencies: [
 				{
@@ -2265,7 +2265,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-contact-us-list",
 			standalone: false,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Contact Us</h2>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p>The <strong>Contact US</strong> module shows all submissions from the contact forms embedded on select landing pages.<br/>\n  It’s your central hub to track and follow up with interested users or potential leads.</p>\n</div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"6\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.contact_request\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\"\n      stateKey=\"pw-table.contact-us-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template #caption>\n      <div class=\"search-contact\">\n        <div class=\"col-12 col-sm-3\">\n          <p-select class=\"pw-filter-select\"\n            [options]=\"[\n              { label: 'Filter by status', value: null },\n              { label: 'Open', value: false },\n              { label: 'Closed', value: true }\n            ]\"\n            placeholder=\"Filter by status\"\n            (onChange)=\"filterClosed($event.value)\"\n            appendTo=\"body\">\n          </p-select>\n        </div>\n        <div class=\"text-end ms-auto\">\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=\"contact-us-list-search\"\n              name=\"contact-us-list-search\"\n              pInputText\n              placeholder=\"Search messages...\"\n              [(ngModel)]=\"searchText\"\n              (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n              aria-label=\"Search messages...\" />\n          </p-iconfield>\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"created_at\">\n          {{ 'Admin.ContactUs.CreatedAt' | transloco }}\n          <p-sort-icon field=\"created_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sort-icon field=\"name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sort-icon field=\"email\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"subject\">\n          {{ 'Admin.ContactUs.Subject' | transloco }}\n          <p-sort-icon field=\"subject\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"message\">\n          {{ 'Admin.ContactUs.Message' | transloco }}\n          <p-sort-icon field=\"message\"></p-sort-icon>\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"name\">{{ item?.name }}</td>\n        <td data-head=\"email\">\n          <a href=\"mailto:{{ item?.email }}\">{{ item?.email }}</a>\n        </td>\n        <td data-head=\"subject\">{{ item?.subject }}</td>\n        <td data-head=\"message\">\n          <span\n            [pTooltip]=\"item?.message\"\n            appendTo=\"body\"\n            tooltipStyleClass=\"custom-tooltip\"\n            tooltipPosition=\"bottom\"\n            >\n            {{ item?.message | textTruncate: 200 }}\n          </span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            @if (!item.closed) {\n              <li\n                pTooltip=\"Close\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"toggleRecord(item.id, true)\"\n                (click)=\"toggleRecord(item.id, true)\">\n                <i class=\"fa fa-times delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            }\n            @if (item.closed) {\n              <li\n                pTooltip=\"Re Open\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"onKeyDown($event, item.id)\"\n                (click)=\"toggleRecord(item.id, false)\">\n                <i class=\"fa fa-retweet edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n            }\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]=\"tt?.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=\"No Contact Requests\"> </pw-no-data>\n  </div>\n}\n",
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Contact Us</h2>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p>The <strong>Contact US</strong> module shows all submissions from the contact forms embedded on select landing pages.<br/>\n  It’s your central hub to track and follow up with interested users or potential leads.</p>\n</div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"6\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.contact_request\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\"\n      stateKey=\"pw-table.contact-us-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template #caption>\n      <div class=\"search-contact\">\n        <div class=\"col-12 col-sm-3\">\n          <p-select class=\"pw-filter-select\"\n            [options]=\"[\n              { label: 'Filter by status', value: null },\n              { label: 'Open', value: false },\n              { label: 'Closed', value: true }\n            ]\"\n            placeholder=\"Filter by status\"\n            (onChange)=\"filterClosed($event.value)\"\n            appendTo=\"body\">\n          </p-select>\n        </div>\n        <div class=\"text-end ms-auto\">\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=\"contact-us-list-search\"\n              name=\"contact-us-list-search\"\n              pInputText\n              placeholder=\"Search messages...\"\n              [(ngModel)]=\"searchText\"\n              (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n              aria-label=\"Search messages...\" />\n          </p-iconfield>\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"created_at\">\n          {{ 'Admin.ContactUs.CreatedAt' | transloco }}\n          <p-sort-icon field=\"created_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sort-icon field=\"name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sort-icon field=\"email\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"subject\">\n          {{ 'Admin.ContactUs.Subject' | transloco }}\n          <p-sort-icon field=\"subject\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"message\">\n          {{ 'Admin.ContactUs.Message' | transloco }}\n          <p-sort-icon field=\"message\"></p-sort-icon>\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"created_at\" [attr.data-label]=\"'Admin.ContactUs.CreatedAt' | transloco\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"name\" [attr.data-label]=\"'Label.Name' | transloco\">{{ item?.name }}</td>\n        <td data-head=\"email\" [attr.data-label]=\"'Label.Email' | transloco\">\n          <a href=\"mailto:{{ item?.email }}\">{{ item?.email }}</a>\n        </td>\n        <td data-head=\"subject\" [attr.data-label]=\"'Admin.ContactUs.Subject' | transloco\">{{ item?.subject }}</td>\n        <td data-head=\"message\" [attr.data-label]=\"'Admin.ContactUs.Message' | transloco\">\n          <span\n            [pTooltip]=\"item?.message\"\n            appendTo=\"body\"\n            tooltipStyleClass=\"custom-tooltip\"\n            tooltipPosition=\"bottom\"\n            >\n            {{ item?.message | textTruncate: 200 }}\n          </span>\n        </td>\n        <td data-head=\"Action\" [attr.data-label]=\"'Label.Actions' | transloco\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            @if (!item.closed) {\n              <li\n                pTooltip=\"Close\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"toggleRecord(item.id, true)\"\n                (click)=\"toggleRecord(item.id, true)\">\n                <i class=\"fa fa-times delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            }\n            @if (item.closed) {\n              <li\n                pTooltip=\"Re Open\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"onKeyDown($event, item.id)\"\n                (click)=\"toggleRecord(item.id, false)\">\n                <i class=\"fa fa-retweet edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n            }\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]=\"tt?.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=\"No Contact Requests\"> </pw-no-data>\n  </div>\n}\n",
 			styles: [".search-contact{display:flex;justify-content:space-between}@media(min-width:320px)and (max-width:720px){.search-contact{display:block}}\n"]
 		}]
 	}],
@@ -5044,7 +5044,7 @@ var DomainConfigCoreComponent = class DomainConfigCoreComponent extends AppBaseC
 			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-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\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            [attr.aria-label]=\"'Admin.DomainConfig.CompanyName' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.CompanyEmail' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.CompanyUrl' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.HostName' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.InternalPath' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.Description' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.FrontendRepoName' | transloco\"/>\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’re confident in what you’re doing — 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              [attr.aria-label]=\"'Admin.DomainConfig.ShardName' | transloco\"/>\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              [attr.aria-label]=\"'Admin.DomainConfig.ShardUrl' | transloco\"/>\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              [attr.aria-label]=\"'Admin.DomainConfig.IntraServicesToken' | transloco\"/>\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              [attr.aria-label]=\"'Admin.DomainConfig.WebhookToken' | transloco\"/>\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",
+			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-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\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            [attr.aria-label]=\"'Admin.DomainConfig.CompanyName' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.CompanyEmail' | transloco\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.SupportEmail' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.SupportEmail' | transloco\" name=\"company_support_email\" controlId=\"domain-core-company_support_email\">\n          <input type=\"email\" id=\"domain-core-company_support_email\" class=\"form-control\" formControlName=\"company_support_email\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CompanyEmail' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_support_email'].errors }\" name=\"input_company_support_email\"\n            [attr.aria-label]=\"'Admin.DomainConfig.SupportEmail' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.CompanyUrl' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.HostName' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.InternalPath' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.Description' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.FrontendRepoName' | transloco\"/>\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’re confident in what you’re doing — 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              [attr.aria-label]=\"'Admin.DomainConfig.ShardName' | transloco\"/>\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              [attr.aria-label]=\"'Admin.DomainConfig.ShardUrl' | transloco\"/>\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              [attr.aria-label]=\"'Admin.DomainConfig.IntraServicesToken' | transloco\"/>\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              [attr.aria-label]=\"'Admin.DomainConfig.WebhookToken' | transloco\"/>\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",
@@ -5235,7 +5235,7 @@ i0.ɵɵngDeclareClassMetadata({
 		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-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\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            [attr.aria-label]=\"'Admin.DomainConfig.CompanyName' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.CompanyEmail' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.CompanyUrl' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.HostName' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.InternalPath' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.Description' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.FrontendRepoName' | transloco\"/>\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’re confident in what you’re doing — 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              [attr.aria-label]=\"'Admin.DomainConfig.ShardName' | transloco\"/>\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              [attr.aria-label]=\"'Admin.DomainConfig.ShardUrl' | transloco\"/>\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              [attr.aria-label]=\"'Admin.DomainConfig.IntraServicesToken' | transloco\"/>\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              [attr.aria-label]=\"'Admin.DomainConfig.WebhookToken' | transloco\"/>\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"
+			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-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\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            [attr.aria-label]=\"'Admin.DomainConfig.CompanyName' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.CompanyEmail' | transloco\"/>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.SupportEmail' | transloco\"\n          [errorMsg]=\"'Admin.DomainConfig.Validation.SupportEmail' | transloco\" name=\"company_support_email\" controlId=\"domain-core-company_support_email\">\n          <input type=\"email\" id=\"domain-core-company_support_email\" class=\"form-control\" formControlName=\"company_support_email\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CompanyEmail' | transloco\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_support_email'].errors }\" name=\"input_company_support_email\"\n            [attr.aria-label]=\"'Admin.DomainConfig.SupportEmail' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.CompanyUrl' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.HostName' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.InternalPath' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.Description' | transloco\"/>\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            [attr.aria-label]=\"'Admin.DomainConfig.FrontendRepoName' | transloco\"/>\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’re confident in what you’re doing — 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              [attr.aria-label]=\"'Admin.DomainConfig.ShardName' | transloco\"/>\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              [attr.aria-label]=\"'Admin.DomainConfig.ShardUrl' | transloco\"/>\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              [attr.aria-label]=\"'Admin.DomainConfig.IntraServicesToken' | transloco\"/>\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              [attr.aria-label]=\"'Admin.DomainConfig.WebhookToken' | transloco\"/>\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: () => [
@@ -6870,7 +6870,7 @@ var DomainConfigListComponent = class DomainConfigListComponent extends AppBaseC
 			selector: "pw-domain-config-list",
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Domains</h2>\n    <button class=\"btn btn-outline-primary btn-sm\"\n      [routerLink]=\"[routers.domainConfigDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Setup New Domain\n    </button>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p>The <strong>Domains</strong> module lets you quickly launch and customize <strong>polished onboarding pages</strong> tied to specific domain names, <br/>\n    which is perfect for managing <strong>branded user experiences</strong> across different products or campaigns.</p>\n  </div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"10\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.domains\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\"\n      stateKey=\"pw-table.domain-config-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template #caption>\n      <div class=\"text-end\">\n        <label for=\"domain-config-list-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=\"domain-config-list-search\"\n            name=\"domain-config-list-search\"\n            pInputText\n            placeholder=\"Search domains...\"\n            [(ngModel)]=\"searchText\"\n            (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n            aria-label=\"Search domains...\" />\n        </p-iconfield>\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"host_name\">\n          {{ 'Admin.DomainConfig.HostName' | transloco }}\n          <p-sort-icon field=\"host_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"internal_path\">\n          {{ 'Admin.DomainConfig.InternalPath' | transloco }}\n          <p-sort-icon field=\"internal_path\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"shard_name\">\n          {{ 'Admin.DomainConfig.ShardName' | transloco }}\n          <p-sort-icon field=\"shard_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"shard_url\">\n          {{ 'Admin.DomainConfig.ShardUrl' | transloco }}\n          <p-sort-icon field=\"shard_url\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"company_name\">\n          {{ 'Admin.DomainConfig.CompanyName' | transloco }}\n          <p-sort-icon field=\"company_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"frontend_repo_name\">\n          {{ 'Admin.DomainConfig.Frontend' | transloco }}\n          <p-sort-icon field=\"frontend_repo_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\" pSortableColumn=\"active\">\n          {{ 'Admin.DomainConfig.Active' | transloco }}\n          <p-sort-icon field=\"active\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"social_login_enabled\">\n          {{ 'Admin.DomainConfig.SocialLoginEnabled' | transloco }}\n          <p-sort-icon field=\"social_login_enabled\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"col\">\n          {{ 'Admin.DomainConfig.Completion' | transloco }}\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"host_name\">\n          <div class=\"d-flex align-items-center\">\n            <a [href]=\"'http://' + item?.host_name\" target=\"_blank\" class=\"text-nowrap\">\n              {{ item?.host_name }}\n            </a>\n            @if (item?.description) {\n              <i class=\"far fa-info-circle info-icon ms-2 text-muted\"\n              [pTooltip]=\"item?.description\" tooltipPosition=\"top\" appendTo=\"body\"></i>\n            }\n          </div>\n        </td>\n\n\n\n        <td data-head=\"internal_path\">{{ item?.internal_path }}</td>\n        <td data-head=\"shard_name\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: shardNames,\n                            item: item?.shard_name\n                        }\"\n            color=\"blue-grey\"\n          class=\"badge\">{{ item?.shard_name }}</span>\n        </td>\n        <td data-head=\"shard_url\">{{ item?.shard_url }}</td>\n        <td data-head=\"company_name\">{{ item?.company_name }}</td>\n        <td data-head=\"frontend_repo_name\">\n          @if (item?.frontend_repo_name) {\n            <span [appDynamicBadge]=\"{\n                              itemsArray: frontendRepoNames,\n                              item: item?.frontend_repo_name\n                          }\"\n              color=\"cyan\"\n            class=\"badge\">{{ item?.frontend_repo_name }}</span>\n          }\n        </td>\n        <td data-head=\"active\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: item?.active\n                        }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"social_login_enabled\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: item?.social_login_enabled\n                        }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.social_login_enabled ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"completion\">\n          <pw-completion-bar\n            [value]=\"getCompletion(item)\"\n            [tooltip]=\"getCompletionTooltip(item)\"></pw-completion-bar>\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              [routerLink]=\"[routers.domainConfigDetails + item?.id]\"\n              class=\"me-2 me-sm-3\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              (keydown.enter)=\"onDelete(item?.id)\"\n              (click)=\"onDelete(item?.id)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Duplicate The Domain Config\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-sm-3\"\n              [routerLink]=\"[routers.domainConfigDetails + 'add']\"\n              [queryParams]=\"{ duplicate_domain_config_id: item.id }\">\n              <i class=\"fa fa-clone edit-icon\" aria-hidden=\"true\"></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]=\"tt?.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]=\"'Admin.DomainConfig.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n",
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Domains</h2>\n    <button class=\"btn btn-outline-primary btn-sm\"\n      [routerLink]=\"[routers.domainConfigDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Setup New Domain\n    </button>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p>The <strong>Domains</strong> module lets you quickly launch and customize <strong>polished onboarding pages</strong> tied to specific domain names, <br/>\n    which is perfect for managing <strong>branded user experiences</strong> across different products or campaigns.</p>\n  </div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"10\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.domains\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\"\n      stateKey=\"pw-table.domain-config-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template #caption>\n      <div class=\"text-end\">\n        <label for=\"domain-config-list-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=\"domain-config-list-search\"\n            name=\"domain-config-list-search\"\n            pInputText\n            placeholder=\"Search domains...\"\n            [(ngModel)]=\"searchText\"\n            (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n            aria-label=\"Search domains...\" />\n        </p-iconfield>\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"host_name\">\n          {{ 'Admin.DomainConfig.HostName' | transloco }}\n          <p-sort-icon field=\"host_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"internal_path\">\n          {{ 'Admin.DomainConfig.InternalPath' | transloco }}\n          <p-sort-icon field=\"internal_path\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"shard_name\">\n          {{ 'Admin.DomainConfig.ShardName' | transloco }}\n          <p-sort-icon field=\"shard_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"shard_url\">\n          {{ 'Admin.DomainConfig.ShardUrl' | transloco }}\n          <p-sort-icon field=\"shard_url\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"company_name\">\n          {{ 'Admin.DomainConfig.CompanyName' | transloco }}\n          <p-sort-icon field=\"company_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"frontend_repo_name\">\n          {{ 'Admin.DomainConfig.Frontend' | transloco }}\n          <p-sort-icon field=\"frontend_repo_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\" pSortableColumn=\"active\">\n          {{ 'Admin.DomainConfig.Active' | transloco }}\n          <p-sort-icon field=\"active\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"social_login_enabled\">\n          {{ 'Admin.DomainConfig.SocialLoginEnabled' | transloco }}\n          <p-sort-icon field=\"social_login_enabled\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"col\">\n          {{ 'Admin.DomainConfig.Completion' | transloco }}\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"host_name\" [attr.data-label]=\"'Admin.DomainConfig.HostName' | transloco\">\n          <div class=\"d-flex align-items-center\">\n            <a [href]=\"'http://' + item?.host_name\" target=\"_blank\" class=\"text-nowrap\">\n              {{ item?.host_name }}\n            </a>\n            @if (item?.description) {\n              <i class=\"far fa-info-circle info-icon ms-2 text-muted\"\n              [pTooltip]=\"item?.description\" tooltipPosition=\"top\" appendTo=\"body\"></i>\n            }\n          </div>\n        </td>\n\n\n\n        <td data-head=\"internal_path\" [attr.data-label]=\"'Admin.DomainConfig.InternalPath' | transloco\">{{ item?.internal_path }}</td>\n        <td data-head=\"shard_name\" [attr.data-label]=\"'Admin.DomainConfig.ShardName' | transloco\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: shardNames,\n                            item: item?.shard_name\n                        }\"\n            color=\"blue-grey\"\n          class=\"badge\">{{ item?.shard_name }}</span>\n        </td>\n        <td data-head=\"shard_url\" [attr.data-label]=\"'Admin.DomainConfig.ShardUrl' | transloco\">{{ item?.shard_url }}</td>\n        <td data-head=\"company_name\" [attr.data-label]=\"'Admin.DomainConfig.CompanyName' | transloco\">{{ item?.company_name }}</td>\n        <td data-head=\"frontend_repo_name\" [attr.data-label]=\"'Admin.DomainConfig.Frontend' | transloco\">\n          @if (item?.frontend_repo_name) {\n            <span [appDynamicBadge]=\"{\n                              itemsArray: frontendRepoNames,\n                              item: item?.frontend_repo_name\n                          }\"\n              color=\"cyan\"\n            class=\"badge\">{{ item?.frontend_repo_name }}</span>\n          }\n        </td>\n        <td data-head=\"active\" [attr.data-label]=\"'Admin.DomainConfig.Active' | transloco\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: item?.active\n                        }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"social_login_enabled\" [attr.data-label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: item?.social_login_enabled\n                        }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.social_login_enabled ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"completion\" [attr.data-label]=\"'Admin.DomainConfig.Completion' | transloco\">\n          <pw-completion-bar\n            [value]=\"getCompletion(item)\"\n            [tooltip]=\"getCompletionTooltip(item)\"></pw-completion-bar>\n        </td>\n        <td data-head=\"Action\" [attr.data-label]=\"'Label.Actions' | transloco\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n              [routerLink]=\"[routers.domainConfigDetails + item?.id]\"\n              class=\"me-2 me-sm-3\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              (keydown.enter)=\"onDelete(item?.id)\"\n              (click)=\"onDelete(item?.id)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Duplicate The Domain Config\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-sm-3\"\n              [routerLink]=\"[routers.domainConfigDetails + 'add']\"\n              [queryParams]=\"{ duplicate_domain_config_id: item.id }\">\n              <i class=\"fa fa-clone edit-icon\" aria-hidden=\"true\"></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]=\"tt?.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]=\"'Admin.DomainConfig.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n",
 			dependencies: [
 				{
 					kind: "component",
@@ -7173,7 +7173,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-domain-config-list",
 			standalone: false,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Domains</h2>\n    <button class=\"btn btn-outline-primary btn-sm\"\n      [routerLink]=\"[routers.domainConfigDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Setup New Domain\n    </button>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p>The <strong>Domains</strong> module lets you quickly launch and customize <strong>polished onboarding pages</strong> tied to specific domain names, <br/>\n    which is perfect for managing <strong>branded user experiences</strong> across different products or campaigns.</p>\n  </div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"10\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.domains\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\"\n      stateKey=\"pw-table.domain-config-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template #caption>\n      <div class=\"text-end\">\n        <label for=\"domain-config-list-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=\"domain-config-list-search\"\n            name=\"domain-config-list-search\"\n            pInputText\n            placeholder=\"Search domains...\"\n            [(ngModel)]=\"searchText\"\n            (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n            aria-label=\"Search domains...\" />\n        </p-iconfield>\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"host_name\">\n          {{ 'Admin.DomainConfig.HostName' | transloco }}\n          <p-sort-icon field=\"host_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"internal_path\">\n          {{ 'Admin.DomainConfig.InternalPath' | transloco }}\n          <p-sort-icon field=\"internal_path\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"shard_name\">\n          {{ 'Admin.DomainConfig.ShardName' | transloco }}\n          <p-sort-icon field=\"shard_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"shard_url\">\n          {{ 'Admin.DomainConfig.ShardUrl' | transloco }}\n          <p-sort-icon field=\"shard_url\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"company_name\">\n          {{ 'Admin.DomainConfig.CompanyName' | transloco }}\n          <p-sort-icon field=\"company_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"frontend_repo_name\">\n          {{ 'Admin.DomainConfig.Frontend' | transloco }}\n          <p-sort-icon field=\"frontend_repo_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\" pSortableColumn=\"active\">\n          {{ 'Admin.DomainConfig.Active' | transloco }}\n          <p-sort-icon field=\"active\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"social_login_enabled\">\n          {{ 'Admin.DomainConfig.SocialLoginEnabled' | transloco }}\n          <p-sort-icon field=\"social_login_enabled\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"col\">\n          {{ 'Admin.DomainConfig.Completion' | transloco }}\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"host_name\">\n          <div class=\"d-flex align-items-center\">\n            <a [href]=\"'http://' + item?.host_name\" target=\"_blank\" class=\"text-nowrap\">\n              {{ item?.host_name }}\n            </a>\n            @if (item?.description) {\n              <i class=\"far fa-info-circle info-icon ms-2 text-muted\"\n              [pTooltip]=\"item?.description\" tooltipPosition=\"top\" appendTo=\"body\"></i>\n            }\n          </div>\n        </td>\n\n\n\n        <td data-head=\"internal_path\">{{ item?.internal_path }}</td>\n        <td data-head=\"shard_name\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: shardNames,\n                            item: item?.shard_name\n                        }\"\n            color=\"blue-grey\"\n          class=\"badge\">{{ item?.shard_name }}</span>\n        </td>\n        <td data-head=\"shard_url\">{{ item?.shard_url }}</td>\n        <td data-head=\"company_name\">{{ item?.company_name }}</td>\n        <td data-head=\"frontend_repo_name\">\n          @if (item?.frontend_repo_name) {\n            <span [appDynamicBadge]=\"{\n                              itemsArray: frontendRepoNames,\n                              item: item?.frontend_repo_name\n                          }\"\n              color=\"cyan\"\n            class=\"badge\">{{ item?.frontend_repo_name }}</span>\n          }\n        </td>\n        <td data-head=\"active\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: item?.active\n                        }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"social_login_enabled\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: item?.social_login_enabled\n                        }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.social_login_enabled ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"completion\">\n          <pw-completion-bar\n            [value]=\"getCompletion(item)\"\n            [tooltip]=\"getCompletionTooltip(item)\"></pw-completion-bar>\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              [routerLink]=\"[routers.domainConfigDetails + item?.id]\"\n              class=\"me-2 me-sm-3\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              (keydown.enter)=\"onDelete(item?.id)\"\n              (click)=\"onDelete(item?.id)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Duplicate The Domain Config\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-sm-3\"\n              [routerLink]=\"[routers.domainConfigDetails + 'add']\"\n              [queryParams]=\"{ duplicate_domain_config_id: item.id }\">\n              <i class=\"fa fa-clone edit-icon\" aria-hidden=\"true\"></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]=\"tt?.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]=\"'Admin.DomainConfig.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n"
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Domains</h2>\n    <button class=\"btn btn-outline-primary btn-sm\"\n      [routerLink]=\"[routers.domainConfigDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Setup New Domain\n    </button>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p>The <strong>Domains</strong> module lets you quickly launch and customize <strong>polished onboarding pages</strong> tied to specific domain names, <br/>\n    which is perfect for managing <strong>branded user experiences</strong> across different products or campaigns.</p>\n  </div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"10\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.domains\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\"\n      stateKey=\"pw-table.domain-config-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template #caption>\n      <div class=\"text-end\">\n        <label for=\"domain-config-list-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=\"domain-config-list-search\"\n            name=\"domain-config-list-search\"\n            pInputText\n            placeholder=\"Search domains...\"\n            [(ngModel)]=\"searchText\"\n            (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n            aria-label=\"Search domains...\" />\n        </p-iconfield>\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"host_name\">\n          {{ 'Admin.DomainConfig.HostName' | transloco }}\n          <p-sort-icon field=\"host_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"internal_path\">\n          {{ 'Admin.DomainConfig.InternalPath' | transloco }}\n          <p-sort-icon field=\"internal_path\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"shard_name\">\n          {{ 'Admin.DomainConfig.ShardName' | transloco }}\n          <p-sort-icon field=\"shard_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"shard_url\">\n          {{ 'Admin.DomainConfig.ShardUrl' | transloco }}\n          <p-sort-icon field=\"shard_url\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"company_name\">\n          {{ 'Admin.DomainConfig.CompanyName' | transloco }}\n          <p-sort-icon field=\"company_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"frontend_repo_name\">\n          {{ 'Admin.DomainConfig.Frontend' | transloco }}\n          <p-sort-icon field=\"frontend_repo_name\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\" pSortableColumn=\"active\">\n          {{ 'Admin.DomainConfig.Active' | transloco }}\n          <p-sort-icon field=\"active\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"social_login_enabled\">\n          {{ 'Admin.DomainConfig.SocialLoginEnabled' | transloco }}\n          <p-sort-icon field=\"social_login_enabled\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"col\">\n          {{ 'Admin.DomainConfig.Completion' | transloco }}\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"host_name\" [attr.data-label]=\"'Admin.DomainConfig.HostName' | transloco\">\n          <div class=\"d-flex align-items-center\">\n            <a [href]=\"'http://' + item?.host_name\" target=\"_blank\" class=\"text-nowrap\">\n              {{ item?.host_name }}\n            </a>\n            @if (item?.description) {\n              <i class=\"far fa-info-circle info-icon ms-2 text-muted\"\n              [pTooltip]=\"item?.description\" tooltipPosition=\"top\" appendTo=\"body\"></i>\n            }\n          </div>\n        </td>\n\n\n\n        <td data-head=\"internal_path\" [attr.data-label]=\"'Admin.DomainConfig.InternalPath' | transloco\">{{ item?.internal_path }}</td>\n        <td data-head=\"shard_name\" [attr.data-label]=\"'Admin.DomainConfig.ShardName' | transloco\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: shardNames,\n                            item: item?.shard_name\n                        }\"\n            color=\"blue-grey\"\n          class=\"badge\">{{ item?.shard_name }}</span>\n        </td>\n        <td data-head=\"shard_url\" [attr.data-label]=\"'Admin.DomainConfig.ShardUrl' | transloco\">{{ item?.shard_url }}</td>\n        <td data-head=\"company_name\" [attr.data-label]=\"'Admin.DomainConfig.CompanyName' | transloco\">{{ item?.company_name }}</td>\n        <td data-head=\"frontend_repo_name\" [attr.data-label]=\"'Admin.DomainConfig.Frontend' | transloco\">\n          @if (item?.frontend_repo_name) {\n            <span [appDynamicBadge]=\"{\n                              itemsArray: frontendRepoNames,\n                              item: item?.frontend_repo_name\n                          }\"\n              color=\"cyan\"\n            class=\"badge\">{{ item?.frontend_repo_name }}</span>\n          }\n        </td>\n        <td data-head=\"active\" [attr.data-label]=\"'Admin.DomainConfig.Active' | transloco\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: item?.active\n                        }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"social_login_enabled\" [attr.data-label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: item?.social_login_enabled\n                        }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.social_login_enabled ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"completion\" [attr.data-label]=\"'Admin.DomainConfig.Completion' | transloco\">\n          <pw-completion-bar\n            [value]=\"getCompletion(item)\"\n            [tooltip]=\"getCompletionTooltip(item)\"></pw-completion-bar>\n        </td>\n        <td data-head=\"Action\" [attr.data-label]=\"'Label.Actions' | transloco\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n              [routerLink]=\"[routers.domainConfigDetails + item?.id]\"\n              class=\"me-2 me-sm-3\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              (keydown.enter)=\"onDelete(item?.id)\"\n              (click)=\"onDelete(item?.id)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Duplicate The Domain Config\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-sm-3\"\n              [routerLink]=\"[routers.domainConfigDetails + 'add']\"\n              [queryParams]=\"{ duplicate_domain_config_id: item.id }\">\n              <i class=\"fa fa-clone edit-icon\" aria-hidden=\"true\"></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]=\"tt?.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]=\"'Admin.DomainConfig.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n"
 		}]
 	}],
 	ctorParameters: () => [
@@ -10169,7 +10169,7 @@ var FeedbackQuestionsListComponent = class FeedbackQuestionsListComponent extend
 			selector: "pw-feedback-questions-list",
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center text-end my-3\">\n    <div class=\"float-start d-flex align-items-baseline\">\n      <a 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        <h2 class=\"card-title p-0\">Feedback Questions for product {{ productData?.name }}</h2>\n      </div>\n      <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n        [routerLink]=\"[routers.feedbackQuestionsDetails + 'add']\"\n        [queryParams]=\"{ product_id: productId }\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create feedback question\n      </button>\n    </div>\n  </div>\n  @if (!isLoaded) {\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"2\" [showCaption]=\"true\" />\n  }\n  <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n    [class.hideTable]=\"data.unfiltered_count === 0\">\n    <p-table #tt\n      [value]=\"data.feedback_questions\"\n      [paginator]=\"data.object_count !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [lazy]=\"true\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\"\n      stateKey=\"pw-table.feedback-questions-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n      <!--sort order should be default empty when page load-->\n\n      <!-- Caption Header, Search Bar -->\n      <ng-template #caption>\n        <div class=\"text-end\">\n          <label for=\"feedback-questions-list-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=\"feedback-questions-list-search\"\n              name=\"feedback-questions-list-search\"\n              pInputText\n              placeholder=\"Search questions...\"\n              [(ngModel)]=\"searchText\"\n              (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n              aria-label=\"Search questions...\" />\n          </p-iconfield>\n        </div>\n      </ng-template>\n\n      <!-- Column Header -->\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"question\">\n            {{ 'Admin.FeedbackQuestions.Question' | transloco }}\n            <p-sort-icon field=\"question\"></p-sort-icon>\n          </th>\n          <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n\n      <!-- Table Body -->\n      <ng-template #body\n        let-item>\n        <tr>\n          <td data-head=\"question\">{{ item?.question }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                [routerLink]=\"[routers.feedbackQuestionsDetails + item?.id]\"\n                [queryParams]=\"{ product_id: productId }\"\n                class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"onDelete(item?.id)\"\n                (click)=\"onDelete(item?.id)\">\n                <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @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]=\"tt?.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]=\"'Admin.FeedbackQuestions.NoDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n",
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center text-end my-3\">\n    <div class=\"float-start d-flex align-items-baseline\">\n      <a 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        <h2 class=\"card-title p-0\">Feedback Questions for product {{ productData?.name }}</h2>\n      </div>\n      <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n        [routerLink]=\"[routers.feedbackQuestionsDetails + 'add']\"\n        [queryParams]=\"{ product_id: productId }\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create feedback question\n      </button>\n    </div>\n  </div>\n  @if (!isLoaded) {\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"2\" [showCaption]=\"true\" />\n  }\n  <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n    [class.hideTable]=\"data.unfiltered_count === 0\">\n    <p-table #tt\n      [value]=\"data.feedback_questions\"\n      [paginator]=\"data.object_count !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [lazy]=\"true\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\"\n      stateKey=\"pw-table.feedback-questions-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n      <!--sort order should be default empty when page load-->\n\n      <!-- Caption Header, Search Bar -->\n      <ng-template #caption>\n        <div class=\"text-end\">\n          <label for=\"feedback-questions-list-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=\"feedback-questions-list-search\"\n              name=\"feedback-questions-list-search\"\n              pInputText\n              placeholder=\"Search questions...\"\n              [(ngModel)]=\"searchText\"\n              (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n              aria-label=\"Search questions...\" />\n          </p-iconfield>\n        </div>\n      </ng-template>\n\n      <!-- Column Header -->\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"question\">\n            {{ 'Admin.FeedbackQuestions.Question' | transloco }}\n            <p-sort-icon field=\"question\"></p-sort-icon>\n          </th>\n          <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n\n      <!-- Table Body -->\n      <ng-template #body\n        let-item>\n        <tr>\n          <td data-head=\"question\" [attr.data-label]=\"'Admin.FeedbackQuestions.Question' | transloco\">{{ item?.question }}</td>\n          <td data-head=\"Action\" [attr.data-label]=\"'Label.Actions' | transloco\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                [routerLink]=\"[routers.feedbackQuestionsDetails + item?.id]\"\n                [queryParams]=\"{ product_id: productId }\"\n                class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"onDelete(item?.id)\"\n                (click)=\"onDelete(item?.id)\">\n                <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @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]=\"tt?.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]=\"'Admin.FeedbackQuestions.NoDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n",
 			styles: ["@media(max-width:575.98px){.col-12.d-flex.justify-content-between{flex-wrap:wrap;text-align:left!important}.col-12.d-flex.justify-content-between>:first-child{flex-basis:100%}.col-12.d-flex.justify-content-between>:first-child~*{margin-left:auto!important}}\n"],
 			dependencies: [
 				{
@@ -10447,7 +10447,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-feedback-questions-list",
 			standalone: false,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center text-end my-3\">\n    <div class=\"float-start d-flex align-items-baseline\">\n      <a 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        <h2 class=\"card-title p-0\">Feedback Questions for product {{ productData?.name }}</h2>\n      </div>\n      <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n        [routerLink]=\"[routers.feedbackQuestionsDetails + 'add']\"\n        [queryParams]=\"{ product_id: productId }\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create feedback question\n      </button>\n    </div>\n  </div>\n  @if (!isLoaded) {\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"2\" [showCaption]=\"true\" />\n  }\n  <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n    [class.hideTable]=\"data.unfiltered_count === 0\">\n    <p-table #tt\n      [value]=\"data.feedback_questions\"\n      [paginator]=\"data.object_count !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [lazy]=\"true\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\"\n      stateKey=\"pw-table.feedback-questions-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n      <!--sort order should be default empty when page load-->\n\n      <!-- Caption Header, Search Bar -->\n      <ng-template #caption>\n        <div class=\"text-end\">\n          <label for=\"feedback-questions-list-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=\"feedback-questions-list-search\"\n              name=\"feedback-questions-list-search\"\n              pInputText\n              placeholder=\"Search questions...\"\n              [(ngModel)]=\"searchText\"\n              (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n              aria-label=\"Search questions...\" />\n          </p-iconfield>\n        </div>\n      </ng-template>\n\n      <!-- Column Header -->\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"question\">\n            {{ 'Admin.FeedbackQuestions.Question' | transloco }}\n            <p-sort-icon field=\"question\"></p-sort-icon>\n          </th>\n          <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n\n      <!-- Table Body -->\n      <ng-template #body\n        let-item>\n        <tr>\n          <td data-head=\"question\">{{ item?.question }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                [routerLink]=\"[routers.feedbackQuestionsDetails + item?.id]\"\n                [queryParams]=\"{ product_id: productId }\"\n                class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"onDelete(item?.id)\"\n                (click)=\"onDelete(item?.id)\">\n                <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @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]=\"tt?.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]=\"'Admin.FeedbackQuestions.NoDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n",
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center text-end my-3\">\n    <div class=\"float-start d-flex align-items-baseline\">\n      <a 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        <h2 class=\"card-title p-0\">Feedback Questions for product {{ productData?.name }}</h2>\n      </div>\n      <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n        [routerLink]=\"[routers.feedbackQuestionsDetails + 'add']\"\n        [queryParams]=\"{ product_id: productId }\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create feedback question\n      </button>\n    </div>\n  </div>\n  @if (!isLoaded) {\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"2\" [showCaption]=\"true\" />\n  }\n  <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n    [class.hideTable]=\"data.unfiltered_count === 0\">\n    <p-table #tt\n      [value]=\"data.feedback_questions\"\n      [paginator]=\"data.object_count !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"data.object_count\"\n      [loading]=\"loading\"\n      [lazy]=\"true\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\"\n      stateKey=\"pw-table.feedback-questions-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n      <!--sort order should be default empty when page load-->\n\n      <!-- Caption Header, Search Bar -->\n      <ng-template #caption>\n        <div class=\"text-end\">\n          <label for=\"feedback-questions-list-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=\"feedback-questions-list-search\"\n              name=\"feedback-questions-list-search\"\n              pInputText\n              placeholder=\"Search questions...\"\n              [(ngModel)]=\"searchText\"\n              (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n              aria-label=\"Search questions...\" />\n          </p-iconfield>\n        </div>\n      </ng-template>\n\n      <!-- Column Header -->\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"question\">\n            {{ 'Admin.FeedbackQuestions.Question' | transloco }}\n            <p-sort-icon field=\"question\"></p-sort-icon>\n          </th>\n          <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n\n      <!-- Table Body -->\n      <ng-template #body\n        let-item>\n        <tr>\n          <td data-head=\"question\" [attr.data-label]=\"'Admin.FeedbackQuestions.Question' | transloco\">{{ item?.question }}</td>\n          <td data-head=\"Action\" [attr.data-label]=\"'Label.Actions' | transloco\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                [routerLink]=\"[routers.feedbackQuestionsDetails + item?.id]\"\n                [queryParams]=\"{ product_id: productId }\"\n                class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"onDelete(item?.id)\"\n                (click)=\"onDelete(item?.id)\">\n                <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @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]=\"tt?.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]=\"'Admin.FeedbackQuestions.NoDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  }\n",
 			styles: ["@media(max-width:575.98px){.col-12.d-flex.justify-content-between{flex-wrap:wrap;text-align:left!important}.col-12.d-flex.justify-content-between>:first-child{flex-basis:100%}.col-12.d-flex.justify-content-between>:first-child~*{margin-left:auto!important}}\n"]
 		}]
 	}],
@@ -11207,7 +11207,7 @@ var IncidentListComponent = class IncidentListComponent extends AppBaseComponent
 			selector: "pw-admin-incident-list",
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<div class=\"row\">\n	<div *rbacAllow=\"'Pages.Admin.Incident.Create'\"\n		class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n		<h2 class=\"card-title p-0\">Incidents</h2>\n		<a [routerLink]=\"[routers.incidentDetails + 'add']\"\n			(click)=\"showList = !showList\"\n			(keydown.enter)=\"showList = !showList\"\n			class=\"btn btn-sm btn-outline-primary\"\n			aria-expanded=\"false\">\n			<i class=\"fa fa-plus-circle\"\n				aria-hidden=\"true\"></i>\n			{{ 'Label.AddNew' | transloco }} Incident\n		</a>\n	</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	<pw-skeleton-table [rows]=\"8\" [columns]=\"7\" [showCaption]=\"true\" />\n}\n@if (showList) {\n<div class=\"row faqlist primeng-datatable-container actions-collapsed mt-0\" [class.d-none]=\"!isLoaded\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n	<div class=\"col-12 px-0\">\n		<p-table #tt\n			stateKey=\"pw-table.admin-incidents-list\"\n			stateStorage=\"session\"\n			[resizableColumns]=\"true\"\n			columnResizeMode=\"expand\"\n			[paginator]=\"totalRecords !== 0\"\n			[rows]=\"PAGE_SIZE\"\n			[totalRecords]=\"totalRecords\"\n			[loading]=\"loading\"\n			[lazy]=\"true\"\n			[filterDelay]=\"1000\"\n			[customSort]=\"true\"\n			[value]=\"openIncidents\"\n			(onLazyLoad)=\"onLazyLoad($event)\">\n			<ng-template #caption>\n				<div class=\"search-filter justify-content-end\">\n					<div class=\"text-end\">\n						<label for=\"incidents-list-search\" class=\"visually-hidden\">Search Incident</label>\n						<p-iconfield iconPosition=\"left\">\n							<p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n							<input id=\"incidents-list-search\"\n								name=\"incidents-list-search\"\n								[(ngModel)]=\"searchText\"\n								(input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n								type=\"text\"\n								pInputText\n								placeholder=\"Search incidents...\"\n								data-cy=\"incident-search\"\n								aria-label=\"Search incidents...\" />\n						</p-iconfield>\n					</div>\n				</div>\n			</ng-template>\n			<ng-template #header>\n				<tr>\n					<th pResizableColumn scope=\"true\">\n						{{ 'Admin.Incident.Description' | transloco }}\n					</th>\n					<th pResizableColumn scope=\"true\">\n						{{ 'Admin.Incident.ServiceImpacted' | transloco }}\n					</th>\n					<th pResizableColumn scope=\"true\"\n						pSortableColumn=\"started_at\">\n						{{ 'Admin.Incident.StartedAt' | transloco }}\n						<p-sort-icon field=\"started_at\"></p-sort-icon>\n					</th>\n					<th pResizableColumn scope=\"true\"\n						pSortableColumn=\"resolved_at\">\n						{{ 'Admin.Incident.ResolvedAt' | transloco }}\n						<p-sort-icon field=\"resolved_at\"></p-sort-icon>\n					</th>\n					<th pResizableColumn scope=\"true\"\n						pSortableColumn=\"last_check_at\">\n						{{ 'Admin.Incident.LastCheckedAt' | transloco }}\n						<p-sort-icon field=\"last_check_at\"></p-sort-icon>\n					</th>\n					<th pResizableColumn scope=\"true\">\n						{{ 'Admin.Incident.Duration' | transloco }}\n					</th>\n					<th scope=\"true\"\n						class=\"actions-list-two\">\n						{{ 'Label.Actions' | transloco }}\n					</th>\n				</tr>\n			</ng-template>\n			<ng-template #body\n				let-incident>\n				<tr>\n					<td data-head=\"description\"\n						class=\"description\">\n						{{(incident?.description | removeHtml: 'quill')|textTruncate: 200}}\n					</td>\n					<td data-head=\"serviceImpacted\">\n						{{ incident?.service_impacted ? incident?.service_impacted :\n            incident?.url_impacted }}\n					</td>\n					<td data-head=\"startedAt\">\n						<span class=\"text-nowrap\">\n							{{ incident?.started_at | date: 'dd-MMM-yyyy, h:mm a' }}\n						</span>\n					</td>\n					<td data-head=\"resolvedAt\">\n						<span class=\"text-nowrap\">\n							{{ incident?.resolved_at | date: 'dd-MMM-yyyy, h:mm a' }}\n						</span>\n					</td>\n					<td data-head=\"lastCheckedAt\">\n					<span class=\"text-nowrap\">\n						{{ incident?.last_check_at | date: 'dd-MMM-yyyy, h:mm a' }}\n					</span>\n				</td>\n					<td data-head=\"Duration\">\n						<!-- {{ calculateDuration(incident?.resolved_at ? incident?.resolved_at :\n            incident?.last_check_at, incident?.started_at) }} -->\n						{{ calculateDuration(incident?.resolved_at,\n            incident?.started_at) }}\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-2\">\n								<i (click)=\"navigateToEdit(incident)\"\n									(keydown.enter)=\"navigateToEdit(incident)\"\n									class=\"fa fa-edit edit-icon\"\n									aria-hidden=\"true\"></i>\n							</li>\n							<li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n								class=\"me-2 me-sm-2\">\n								<i\n								(keydown.enter)=\"onDelete(incident)\"\n								(click)=\"onDelete(incident)\"\n									class=\"fa fa-trash delete-icon\"\n									aria-hidden=\"true\"></i>\n							</li>\n						</ul>\n					</td>\n				</tr>\n			</ng-template>\n		</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	@if (openIncidents.length !== 0) {\n		<pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"openIncidents.length\" />\n	}\n	</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",
+			template: "<div class=\"row\">\n	<div *rbacAllow=\"'Pages.Admin.Incident.Create'\"\n		class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n		<h2 class=\"card-title p-0\">Incidents</h2>\n		<a [routerLink]=\"[routers.incidentDetails + 'add']\"\n			(click)=\"showList = !showList\"\n			(keydown.enter)=\"showList = !showList\"\n			class=\"btn btn-sm btn-outline-primary\"\n			aria-expanded=\"false\">\n			<i class=\"fa fa-plus-circle\"\n				aria-hidden=\"true\"></i>\n			{{ 'Label.AddNew' | transloco }} Incident\n		</a>\n	</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	<pw-skeleton-table [rows]=\"8\" [columns]=\"7\" [showCaption]=\"true\" />\n}\n@if (showList) {\n<div class=\"row faqlist primeng-datatable-container actions-collapsed mt-0\" [class.d-none]=\"!isLoaded\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n	<div class=\"col-12 px-0\">\n		<p-table #tt\n			stateKey=\"pw-table.admin-incidents-list\"\n			stateStorage=\"session\"\n			[resizableColumns]=\"true\"\n			columnResizeMode=\"expand\"\n			[paginator]=\"totalRecords !== 0\"\n			[rows]=\"PAGE_SIZE\"\n			[totalRecords]=\"totalRecords\"\n			[loading]=\"loading\"\n			[lazy]=\"true\"\n			[filterDelay]=\"1000\"\n			[customSort]=\"true\"\n			[value]=\"openIncidents\"\n			(onLazyLoad)=\"onLazyLoad($event)\">\n			<ng-template #caption>\n				<div class=\"search-filter justify-content-end\">\n					<div class=\"text-end\">\n						<label for=\"incidents-list-search\" class=\"visually-hidden\">Search Incident</label>\n						<p-iconfield iconPosition=\"left\">\n							<p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n							<input id=\"incidents-list-search\"\n								name=\"incidents-list-search\"\n								[(ngModel)]=\"searchText\"\n								(input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n								type=\"text\"\n								pInputText\n								placeholder=\"Search incidents...\"\n								data-cy=\"incident-search\"\n								aria-label=\"Search incidents...\" />\n						</p-iconfield>\n					</div>\n				</div>\n			</ng-template>\n			<ng-template #header>\n				<tr>\n					<th pResizableColumn scope=\"true\">\n						{{ 'Admin.Incident.Description' | transloco }}\n					</th>\n					<th pResizableColumn scope=\"true\">\n						{{ 'Admin.Incident.ServiceImpacted' | transloco }}\n					</th>\n					<th pResizableColumn scope=\"true\"\n						pSortableColumn=\"started_at\">\n						{{ 'Admin.Incident.StartedAt' | transloco }}\n						<p-sort-icon field=\"started_at\"></p-sort-icon>\n					</th>\n					<th pResizableColumn scope=\"true\"\n						pSortableColumn=\"resolved_at\">\n						{{ 'Admin.Incident.ResolvedAt' | transloco }}\n						<p-sort-icon field=\"resolved_at\"></p-sort-icon>\n					</th>\n					<th pResizableColumn scope=\"true\"\n						pSortableColumn=\"last_check_at\">\n						{{ 'Admin.Incident.LastCheckedAt' | transloco }}\n						<p-sort-icon field=\"last_check_at\"></p-sort-icon>\n					</th>\n					<th pResizableColumn scope=\"true\">\n						{{ 'Admin.Incident.Duration' | transloco }}\n					</th>\n					<th scope=\"true\"\n						class=\"actions-list-two\">\n						{{ 'Label.Actions' | transloco }}\n					</th>\n				</tr>\n			</ng-template>\n			<ng-template #body\n				let-incident>\n				<tr>\n					<td data-head=\"description\" [attr.data-label]=\"'Admin.Incident.Description' | transloco\"\n						class=\"description\">\n						{{(incident?.description | removeHtml: 'quill')|textTruncate: 200}}\n					</td>\n					<td data-head=\"serviceImpacted\" [attr.data-label]=\"'Admin.Incident.ServiceImpacted' | transloco\">\n						{{ incident?.service_impacted ? incident?.service_impacted :\n            incident?.url_impacted }}\n					</td>\n					<td data-head=\"startedAt\" [attr.data-label]=\"'Admin.Incident.StartedAt' | transloco\">\n						<span class=\"text-nowrap\">\n							{{ incident?.started_at | date: 'dd-MMM-yyyy, h:mm a' }}\n						</span>\n					</td>\n					<td data-head=\"resolvedAt\" [attr.data-label]=\"'Admin.Incident.ResolvedAt' | transloco\">\n						<span class=\"text-nowrap\">\n							{{ incident?.resolved_at | date: 'dd-MMM-yyyy, h:mm a' }}\n						</span>\n					</td>\n					<td data-head=\"lastCheckedAt\" [attr.data-label]=\"'Admin.Incident.LastCheckedAt' | transloco\">\n					<span class=\"text-nowrap\">\n						{{ incident?.last_check_at | date: 'dd-MMM-yyyy, h:mm a' }}\n					</span>\n				</td>\n					<td data-head=\"Duration\" [attr.data-label]=\"'Admin.Incident.Duration' | transloco\">\n						<!-- {{ calculateDuration(incident?.resolved_at ? incident?.resolved_at :\n            incident?.last_check_at, incident?.started_at) }} -->\n						{{ calculateDuration(incident?.resolved_at,\n            incident?.started_at) }}\n					</td>\n					<td data-head=\"Action\" [attr.data-label]=\"'Label.Actions' | transloco\">\n						<ul class=\"list-unstyled list-inline list-action\">\n							<li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n								class=\"me-2 me-sm-2\">\n								<i (click)=\"navigateToEdit(incident)\"\n									(keydown.enter)=\"navigateToEdit(incident)\"\n									class=\"fa fa-edit edit-icon\"\n									aria-hidden=\"true\"></i>\n							</li>\n							<li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n								class=\"me-2 me-sm-2\">\n								<i\n								(keydown.enter)=\"onDelete(incident)\"\n								(click)=\"onDelete(incident)\"\n									class=\"fa fa-trash delete-icon\"\n									aria-hidden=\"true\"></i>\n							</li>\n						</ul>\n					</td>\n				</tr>\n			</ng-template>\n		</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	@if (openIncidents.length !== 0) {\n		<pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"openIncidents.length\" />\n	}\n	</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: [
 				{
@@ -11506,7 +11506,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-admin-incident-list",
 			standalone: false,
-			template: "<div class=\"row\">\n	<div *rbacAllow=\"'Pages.Admin.Incident.Create'\"\n		class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n		<h2 class=\"card-title p-0\">Incidents</h2>\n		<a [routerLink]=\"[routers.incidentDetails + 'add']\"\n			(click)=\"showList = !showList\"\n			(keydown.enter)=\"showList = !showList\"\n			class=\"btn btn-sm btn-outline-primary\"\n			aria-expanded=\"false\">\n			<i class=\"fa fa-plus-circle\"\n				aria-hidden=\"true\"></i>\n			{{ 'Label.AddNew' | transloco }} Incident\n		</a>\n	</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	<pw-skeleton-table [rows]=\"8\" [columns]=\"7\" [showCaption]=\"true\" />\n}\n@if (showList) {\n<div class=\"row faqlist primeng-datatable-container actions-collapsed mt-0\" [class.d-none]=\"!isLoaded\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n	<div class=\"col-12 px-0\">\n		<p-table #tt\n			stateKey=\"pw-table.admin-incidents-list\"\n			stateStorage=\"session\"\n			[resizableColumns]=\"true\"\n			columnResizeMode=\"expand\"\n			[paginator]=\"totalRecords !== 0\"\n			[rows]=\"PAGE_SIZE\"\n			[totalRecords]=\"totalRecords\"\n			[loading]=\"loading\"\n			[lazy]=\"true\"\n			[filterDelay]=\"1000\"\n			[customSort]=\"true\"\n			[value]=\"openIncidents\"\n			(onLazyLoad)=\"onLazyLoad($event)\">\n			<ng-template #caption>\n				<div class=\"search-filter justify-content-end\">\n					<div class=\"text-end\">\n						<label for=\"incidents-list-search\" class=\"visually-hidden\">Search Incident</label>\n						<p-iconfield iconPosition=\"left\">\n							<p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n							<input id=\"incidents-list-search\"\n								name=\"incidents-list-search\"\n								[(ngModel)]=\"searchText\"\n								(input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n								type=\"text\"\n								pInputText\n								placeholder=\"Search incidents...\"\n								data-cy=\"incident-search\"\n								aria-label=\"Search incidents...\" />\n						</p-iconfield>\n					</div>\n				</div>\n			</ng-template>\n			<ng-template #header>\n				<tr>\n					<th pResizableColumn scope=\"true\">\n						{{ 'Admin.Incident.Description' | transloco }}\n					</th>\n					<th pResizableColumn scope=\"true\">\n						{{ 'Admin.Incident.ServiceImpacted' | transloco }}\n					</th>\n					<th pResizableColumn scope=\"true\"\n						pSortableColumn=\"started_at\">\n						{{ 'Admin.Incident.StartedAt' | transloco }}\n						<p-sort-icon field=\"started_at\"></p-sort-icon>\n					</th>\n					<th pResizableColumn scope=\"true\"\n						pSortableColumn=\"resolved_at\">\n						{{ 'Admin.Incident.ResolvedAt' | transloco }}\n						<p-sort-icon field=\"resolved_at\"></p-sort-icon>\n					</th>\n					<th pResizableColumn scope=\"true\"\n						pSortableColumn=\"last_check_at\">\n						{{ 'Admin.Incident.LastCheckedAt' | transloco }}\n						<p-sort-icon field=\"last_check_at\"></p-sort-icon>\n					</th>\n					<th pResizableColumn scope=\"true\">\n						{{ 'Admin.Incident.Duration' | transloco }}\n					</th>\n					<th scope=\"true\"\n						class=\"actions-list-two\">\n						{{ 'Label.Actions' | transloco }}\n					</th>\n				</tr>\n			</ng-template>\n			<ng-template #body\n				let-incident>\n				<tr>\n					<td data-head=\"description\"\n						class=\"description\">\n						{{(incident?.description | removeHtml: 'quill')|textTruncate: 200}}\n					</td>\n					<td data-head=\"serviceImpacted\">\n						{{ incident?.service_impacted ? incident?.service_impacted :\n            incident?.url_impacted }}\n					</td>\n					<td data-head=\"startedAt\">\n						<span class=\"text-nowrap\">\n							{{ incident?.started_at | date: 'dd-MMM-yyyy, h:mm a' }}\n						</span>\n					</td>\n					<td data-head=\"resolvedAt\">\n						<span class=\"text-nowrap\">\n							{{ incident?.resolved_at | date: 'dd-MMM-yyyy, h:mm a' }}\n						</span>\n					</td>\n					<td data-head=\"lastCheckedAt\">\n					<span class=\"text-nowrap\">\n						{{ incident?.last_check_at | date: 'dd-MMM-yyyy, h:mm a' }}\n					</span>\n				</td>\n					<td data-head=\"Duration\">\n						<!-- {{ calculateDuration(incident?.resolved_at ? incident?.resolved_at :\n            incident?.last_check_at, incident?.started_at) }} -->\n						{{ calculateDuration(incident?.resolved_at,\n            incident?.started_at) }}\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-2\">\n								<i (click)=\"navigateToEdit(incident)\"\n									(keydown.enter)=\"navigateToEdit(incident)\"\n									class=\"fa fa-edit edit-icon\"\n									aria-hidden=\"true\"></i>\n							</li>\n							<li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n								class=\"me-2 me-sm-2\">\n								<i\n								(keydown.enter)=\"onDelete(incident)\"\n								(click)=\"onDelete(incident)\"\n									class=\"fa fa-trash delete-icon\"\n									aria-hidden=\"true\"></i>\n							</li>\n						</ul>\n					</td>\n				</tr>\n			</ng-template>\n		</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	@if (openIncidents.length !== 0) {\n		<pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"openIncidents.length\" />\n	}\n	</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",
+			template: "<div class=\"row\">\n	<div *rbacAllow=\"'Pages.Admin.Incident.Create'\"\n		class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n		<h2 class=\"card-title p-0\">Incidents</h2>\n		<a [routerLink]=\"[routers.incidentDetails + 'add']\"\n			(click)=\"showList = !showList\"\n			(keydown.enter)=\"showList = !showList\"\n			class=\"btn btn-sm btn-outline-primary\"\n			aria-expanded=\"false\">\n			<i class=\"fa fa-plus-circle\"\n				aria-hidden=\"true\"></i>\n			{{ 'Label.AddNew' | transloco }} Incident\n		</a>\n	</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	<pw-skeleton-table [rows]=\"8\" [columns]=\"7\" [showCaption]=\"true\" />\n}\n@if (showList) {\n<div class=\"row faqlist primeng-datatable-container actions-collapsed mt-0\" [class.d-none]=\"!isLoaded\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n	<div class=\"col-12 px-0\">\n		<p-table #tt\n			stateKey=\"pw-table.admin-incidents-list\"\n			stateStorage=\"session\"\n			[resizableColumns]=\"true\"\n			columnResizeMode=\"expand\"\n			[paginator]=\"totalRecords !== 0\"\n			[rows]=\"PAGE_SIZE\"\n			[totalRecords]=\"totalRecords\"\n			[loading]=\"loading\"\n			[lazy]=\"true\"\n			[filterDelay]=\"1000\"\n			[customSort]=\"true\"\n			[value]=\"openIncidents\"\n			(onLazyLoad)=\"onLazyLoad($event)\">\n			<ng-template #caption>\n				<div class=\"search-filter justify-content-end\">\n					<div class=\"text-end\">\n						<label for=\"incidents-list-search\" class=\"visually-hidden\">Search Incident</label>\n						<p-iconfield iconPosition=\"left\">\n							<p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n							<input id=\"incidents-list-search\"\n								name=\"incidents-list-search\"\n								[(ngModel)]=\"searchText\"\n								(input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n								type=\"text\"\n								pInputText\n								placeholder=\"Search incidents...\"\n								data-cy=\"incident-search\"\n								aria-label=\"Search incidents...\" />\n						</p-iconfield>\n					</div>\n				</div>\n			</ng-template>\n			<ng-template #header>\n				<tr>\n					<th pResizableColumn scope=\"true\">\n						{{ 'Admin.Incident.Description' | transloco }}\n					</th>\n					<th pResizableColumn scope=\"true\">\n						{{ 'Admin.Incident.ServiceImpacted' | transloco }}\n					</th>\n					<th pResizableColumn scope=\"true\"\n						pSortableColumn=\"started_at\">\n						{{ 'Admin.Incident.StartedAt' | transloco }}\n						<p-sort-icon field=\"started_at\"></p-sort-icon>\n					</th>\n					<th pResizableColumn scope=\"true\"\n						pSortableColumn=\"resolved_at\">\n						{{ 'Admin.Incident.ResolvedAt' | transloco }}\n						<p-sort-icon field=\"resolved_at\"></p-sort-icon>\n					</th>\n					<th pResizableColumn scope=\"true\"\n						pSortableColumn=\"last_check_at\">\n						{{ 'Admin.Incident.LastCheckedAt' | transloco }}\n						<p-sort-icon field=\"last_check_at\"></p-sort-icon>\n					</th>\n					<th pResizableColumn scope=\"true\">\n						{{ 'Admin.Incident.Duration' | transloco }}\n					</th>\n					<th scope=\"true\"\n						class=\"actions-list-two\">\n						{{ 'Label.Actions' | transloco }}\n					</th>\n				</tr>\n			</ng-template>\n			<ng-template #body\n				let-incident>\n				<tr>\n					<td data-head=\"description\" [attr.data-label]=\"'Admin.Incident.Description' | transloco\"\n						class=\"description\">\n						{{(incident?.description | removeHtml: 'quill')|textTruncate: 200}}\n					</td>\n					<td data-head=\"serviceImpacted\" [attr.data-label]=\"'Admin.Incident.ServiceImpacted' | transloco\">\n						{{ incident?.service_impacted ? incident?.service_impacted :\n            incident?.url_impacted }}\n					</td>\n					<td data-head=\"startedAt\" [attr.data-label]=\"'Admin.Incident.StartedAt' | transloco\">\n						<span class=\"text-nowrap\">\n							{{ incident?.started_at | date: 'dd-MMM-yyyy, h:mm a' }}\n						</span>\n					</td>\n					<td data-head=\"resolvedAt\" [attr.data-label]=\"'Admin.Incident.ResolvedAt' | transloco\">\n						<span class=\"text-nowrap\">\n							{{ incident?.resolved_at | date: 'dd-MMM-yyyy, h:mm a' }}\n						</span>\n					</td>\n					<td data-head=\"lastCheckedAt\" [attr.data-label]=\"'Admin.Incident.LastCheckedAt' | transloco\">\n					<span class=\"text-nowrap\">\n						{{ incident?.last_check_at | date: 'dd-MMM-yyyy, h:mm a' }}\n					</span>\n				</td>\n					<td data-head=\"Duration\" [attr.data-label]=\"'Admin.Incident.Duration' | transloco\">\n						<!-- {{ calculateDuration(incident?.resolved_at ? incident?.resolved_at :\n            incident?.last_check_at, incident?.started_at) }} -->\n						{{ calculateDuration(incident?.resolved_at,\n            incident?.started_at) }}\n					</td>\n					<td data-head=\"Action\" [attr.data-label]=\"'Label.Actions' | transloco\">\n						<ul class=\"list-unstyled list-inline list-action\">\n							<li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n								class=\"me-2 me-sm-2\">\n								<i (click)=\"navigateToEdit(incident)\"\n									(keydown.enter)=\"navigateToEdit(incident)\"\n									class=\"fa fa-edit edit-icon\"\n									aria-hidden=\"true\"></i>\n							</li>\n							<li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n								class=\"me-2 me-sm-2\">\n								<i\n								(keydown.enter)=\"onDelete(incident)\"\n								(click)=\"onDelete(incident)\"\n									class=\"fa fa-trash delete-icon\"\n									aria-hidden=\"true\"></i>\n							</li>\n						</ul>\n					</td>\n				</tr>\n			</ng-template>\n		</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	@if (openIncidents.length !== 0) {\n		<pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"openIncidents.length\" />\n	}\n	</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"]
 		}]
 	}],
@@ -12244,7 +12244,7 @@ var LoginNotificationsListComponent = class LoginNotificationsListComponent exte
 			selector: "pw-login-notifications-list",
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Dashboard Notifications</h2>\n    <button class=\"btn btn-outline-primary btn-sm\"\n      [routerLink]=\"[routers.loginNotifications + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Dashboard Notification\n    </button>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p>The <strong>Dashboard Notification</strong> module lets you create banner messages that appear at the top of every page.<br/>\n    Use these banners to communicate important updates — like <strong>new feature announcements</strong> or <strong>known issues</strong> — directly to your active users. </p>\n  </div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"7\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    stateKey=\"pw-table.admin-login-notifications-list\"\n    stateStorage=\"session\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n    [value]=\"data.notifications\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template #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=\"login-notifications-list-search\"\n            name=\"login-notifications-list-search\"\n            pInputText\n            placeholder=\"Search notifications...\"\n            [(ngModel)]=\"searchText\"\n            (input)=\"onSearchChange($any($event.target).value)\"\n            aria-label=\"Search notifications...\" />\n        </p-iconfield>\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"notification_type\">\n          {{ 'Admin.LoginNotification.NotificationType' | transloco }}\n          <p-sort-icon field=\"notification_type\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Admin.LoginNotification.Body' | transloco }}\n          <p-sort-icon field=\"body\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\">\n          {{ 'Admin.LoginNotification.IsPermanent' | transloco }}\n        </th>\n        <th pResizableColumn scope=\"true\"\n          class=\"w-25\">\n          {{ 'Admin.LoginNotification.FeatureKeys' | transloco }}\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"visible_from\">\n          {{ 'Admin.LoginNotification.VisibleFrom' | transloco }}\n          <p-sort-icon field=\"visible_from\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"visible_until\">\n          {{ 'Admin.LoginNotification.VisibleUntil' | transloco }}\n          <p-sort-icon field=\"visible_until\"></p-sort-icon>\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"notification_type\">\n          @if (item?.notification_type) {\n            <span\n              class=\"badge\"\n              [ngClass]=\"'bg-' + item.notification_type\">\n              {{ item.notification_type }}\n            </span>\n          }\n        </td>\n        <td\n          data-head=\"body\"\n          >\n          <span [pTooltip]=\"item?.body\"\n            tooltipStyleClass=\"custom-tooltip\"\n          tooltipPosition=\"top\"  appendTo=\"body\"> {{ item?.body | textTruncate: 30 }}</span>\n\n        </td>\n        <td data-head=\"Is Permanent\">\n          <span [appDynamicBadge]=\"{\n                              itemsArray: [true, false],\n                              item: item?.is_permanent\n                          }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.is_permanent ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"feature_keys\">\n          @for (data of item?.feature_keys.slice(0, 3); track data) {\n            <span\n              class=\"badge m-1\"\n              [appDynamicBadge]=\"{ itemsArray: item?.feature_keys, item: data }\"\n              [colorByName]=\"true\"\n              [dataName]=\"data\"\n            color=\"cyan\">{{ data }}</span>\n          }\n\n          @if (item.expanded) {\n            <span>\n              @for (data of item?.feature_keys.slice(3); track data) {\n                <span\n                  class=\"badge m-1\"\n                  [appDynamicBadge]=\"{ itemsArray: item?.feature_keys, item: data }\"\n                  [colorByName]=\"true\"\n                  [dataName]=\"data\"\n                color=\"cyan\">{{ data }}</span>\n              }\n            </span>\n          }\n\n          @if (item?.feature_keys.length > 3) {\n            <span class=\"fw-bold\">\n              <a (click)=\"item.expanded = !item.expanded\">\n                <span>...</span>\n              </a>\n            </span>\n          }\n\n        </td>\n        <td\n          data-head=\"visible_from\"\n          [ngClass]=\"{ 'text-success-muted fw-bold': isDateInPast(item?.visible_from) }\"\n          >\n          {{ item?.visible_from | dateFormat }}\n        </td>\n        <td\n          data-head=\"visible_until\"\n          [ngClass]=\"{ 'text-success-muted fw-bold': isDateInFuture(item?.visible_until) }\"\n          >\n          {{ item?.visible_until | dateFormat }}\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              [routerLink]=\"[routers.loginNotifications + item?.id]\"\n              class=\"me-2 me-sm-3\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              (keydown.enter)=\"onDelete(item?.id)\"\n              (click)=\"onDelete(item?.id)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @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]=\"tt?.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]=\"'Admin.LoginNotification.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n",
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Dashboard Notifications</h2>\n    <button class=\"btn btn-outline-primary btn-sm\"\n      [routerLink]=\"[routers.loginNotifications + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Dashboard Notification\n    </button>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p>The <strong>Dashboard Notification</strong> module lets you create banner messages that appear at the top of every page.<br/>\n    Use these banners to communicate important updates — like <strong>new feature announcements</strong> or <strong>known issues</strong> — directly to your active users. </p>\n  </div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"7\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    stateKey=\"pw-table.admin-login-notifications-list\"\n    stateStorage=\"session\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n    [value]=\"data.notifications\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template #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=\"login-notifications-list-search\"\n            name=\"login-notifications-list-search\"\n            pInputText\n            placeholder=\"Search notifications...\"\n            [(ngModel)]=\"searchText\"\n            (input)=\"onSearchChange($any($event.target).value)\"\n            aria-label=\"Search notifications...\" />\n        </p-iconfield>\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"notification_type\">\n          {{ 'Admin.LoginNotification.NotificationType' | transloco }}\n          <p-sort-icon field=\"notification_type\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Admin.LoginNotification.Body' | transloco }}\n          <p-sort-icon field=\"body\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\">\n          {{ 'Admin.LoginNotification.IsPermanent' | transloco }}\n        </th>\n        <th pResizableColumn scope=\"true\"\n          class=\"w-25\">\n          {{ 'Admin.LoginNotification.FeatureKeys' | transloco }}\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"visible_from\">\n          {{ 'Admin.LoginNotification.VisibleFrom' | transloco }}\n          <p-sort-icon field=\"visible_from\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"visible_until\">\n          {{ 'Admin.LoginNotification.VisibleUntil' | transloco }}\n          <p-sort-icon field=\"visible_until\"></p-sort-icon>\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"notification_type\" [attr.data-label]=\"'Admin.LoginNotification.NotificationType' | transloco\">\n          @if (item?.notification_type) {\n            <span\n              class=\"badge\"\n              [ngClass]=\"'bg-' + item.notification_type\">\n              {{ item.notification_type }}\n            </span>\n          }\n        </td>\n        <td\n          data-head=\"body\" [attr.data-label]=\"'Admin.LoginNotification.Body' | transloco\"\n          >\n          <span [pTooltip]=\"item?.body\"\n            tooltipStyleClass=\"custom-tooltip\"\n          tooltipPosition=\"top\"  appendTo=\"body\"> {{ item?.body | textTruncate: 30 }}</span>\n\n        </td>\n        <td data-head=\"Is Permanent\" [attr.data-label]=\"'Admin.LoginNotification.IsPermanent' | transloco\">\n          <span [appDynamicBadge]=\"{\n                              itemsArray: [true, false],\n                              item: item?.is_permanent\n                          }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.is_permanent ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"feature_keys\" [attr.data-label]=\"'Admin.LoginNotification.FeatureKeys' | transloco\">\n          @for (data of item?.feature_keys.slice(0, 3); track data) {\n            <span\n              class=\"badge m-1\"\n              [appDynamicBadge]=\"{ itemsArray: item?.feature_keys, item: data }\"\n              [colorByName]=\"true\"\n              [dataName]=\"data\"\n            color=\"cyan\">{{ data }}</span>\n          }\n\n          @if (item.expanded) {\n            <span>\n              @for (data of item?.feature_keys.slice(3); track data) {\n                <span\n                  class=\"badge m-1\"\n                  [appDynamicBadge]=\"{ itemsArray: item?.feature_keys, item: data }\"\n                  [colorByName]=\"true\"\n                  [dataName]=\"data\"\n                color=\"cyan\">{{ data }}</span>\n              }\n            </span>\n          }\n\n          @if (item?.feature_keys.length > 3) {\n            <span class=\"fw-bold\">\n              <a (click)=\"item.expanded = !item.expanded\">\n                <span>...</span>\n              </a>\n            </span>\n          }\n\n        </td>\n        <td\n          data-head=\"visible_from\" [attr.data-label]=\"'Admin.LoginNotification.VisibleFrom' | transloco\"\n          [ngClass]=\"{ 'text-success-muted fw-bold': isDateInPast(item?.visible_from) }\"\n          >\n          {{ item?.visible_from | dateFormat }}\n        </td>\n        <td\n          data-head=\"visible_until\" [attr.data-label]=\"'Admin.LoginNotification.VisibleUntil' | transloco\"\n          [ngClass]=\"{ 'text-success-muted fw-bold': isDateInFuture(item?.visible_until) }\"\n          >\n          {{ item?.visible_until | dateFormat }}\n        </td>\n        <td data-head=\"Action\" [attr.data-label]=\"'Label.Actions' | transloco\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n              [routerLink]=\"[routers.loginNotifications + item?.id]\"\n              class=\"me-2 me-sm-3\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              (keydown.enter)=\"onDelete(item?.id)\"\n              (click)=\"onDelete(item?.id)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @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]=\"tt?.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]=\"'Admin.LoginNotification.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n",
 			dependencies: [
 				{
 					kind: "component",
@@ -12548,7 +12548,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-login-notifications-list",
 			standalone: false,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Dashboard Notifications</h2>\n    <button class=\"btn btn-outline-primary btn-sm\"\n      [routerLink]=\"[routers.loginNotifications + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Dashboard Notification\n    </button>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p>The <strong>Dashboard Notification</strong> module lets you create banner messages that appear at the top of every page.<br/>\n    Use these banners to communicate important updates — like <strong>new feature announcements</strong> or <strong>known issues</strong> — directly to your active users. </p>\n  </div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"7\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    stateKey=\"pw-table.admin-login-notifications-list\"\n    stateStorage=\"session\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n    [value]=\"data.notifications\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template #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=\"login-notifications-list-search\"\n            name=\"login-notifications-list-search\"\n            pInputText\n            placeholder=\"Search notifications...\"\n            [(ngModel)]=\"searchText\"\n            (input)=\"onSearchChange($any($event.target).value)\"\n            aria-label=\"Search notifications...\" />\n        </p-iconfield>\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"notification_type\">\n          {{ 'Admin.LoginNotification.NotificationType' | transloco }}\n          <p-sort-icon field=\"notification_type\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Admin.LoginNotification.Body' | transloco }}\n          <p-sort-icon field=\"body\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\">\n          {{ 'Admin.LoginNotification.IsPermanent' | transloco }}\n        </th>\n        <th pResizableColumn scope=\"true\"\n          class=\"w-25\">\n          {{ 'Admin.LoginNotification.FeatureKeys' | transloco }}\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"visible_from\">\n          {{ 'Admin.LoginNotification.VisibleFrom' | transloco }}\n          <p-sort-icon field=\"visible_from\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"visible_until\">\n          {{ 'Admin.LoginNotification.VisibleUntil' | transloco }}\n          <p-sort-icon field=\"visible_until\"></p-sort-icon>\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"notification_type\">\n          @if (item?.notification_type) {\n            <span\n              class=\"badge\"\n              [ngClass]=\"'bg-' + item.notification_type\">\n              {{ item.notification_type }}\n            </span>\n          }\n        </td>\n        <td\n          data-head=\"body\"\n          >\n          <span [pTooltip]=\"item?.body\"\n            tooltipStyleClass=\"custom-tooltip\"\n          tooltipPosition=\"top\"  appendTo=\"body\"> {{ item?.body | textTruncate: 30 }}</span>\n\n        </td>\n        <td data-head=\"Is Permanent\">\n          <span [appDynamicBadge]=\"{\n                              itemsArray: [true, false],\n                              item: item?.is_permanent\n                          }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.is_permanent ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"feature_keys\">\n          @for (data of item?.feature_keys.slice(0, 3); track data) {\n            <span\n              class=\"badge m-1\"\n              [appDynamicBadge]=\"{ itemsArray: item?.feature_keys, item: data }\"\n              [colorByName]=\"true\"\n              [dataName]=\"data\"\n            color=\"cyan\">{{ data }}</span>\n          }\n\n          @if (item.expanded) {\n            <span>\n              @for (data of item?.feature_keys.slice(3); track data) {\n                <span\n                  class=\"badge m-1\"\n                  [appDynamicBadge]=\"{ itemsArray: item?.feature_keys, item: data }\"\n                  [colorByName]=\"true\"\n                  [dataName]=\"data\"\n                color=\"cyan\">{{ data }}</span>\n              }\n            </span>\n          }\n\n          @if (item?.feature_keys.length > 3) {\n            <span class=\"fw-bold\">\n              <a (click)=\"item.expanded = !item.expanded\">\n                <span>...</span>\n              </a>\n            </span>\n          }\n\n        </td>\n        <td\n          data-head=\"visible_from\"\n          [ngClass]=\"{ 'text-success-muted fw-bold': isDateInPast(item?.visible_from) }\"\n          >\n          {{ item?.visible_from | dateFormat }}\n        </td>\n        <td\n          data-head=\"visible_until\"\n          [ngClass]=\"{ 'text-success-muted fw-bold': isDateInFuture(item?.visible_until) }\"\n          >\n          {{ item?.visible_until | dateFormat }}\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              [routerLink]=\"[routers.loginNotifications + item?.id]\"\n              class=\"me-2 me-sm-3\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              (keydown.enter)=\"onDelete(item?.id)\"\n              (click)=\"onDelete(item?.id)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @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]=\"tt?.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]=\"'Admin.LoginNotification.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n"
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Dashboard Notifications</h2>\n    <button class=\"btn btn-outline-primary btn-sm\"\n      [routerLink]=\"[routers.loginNotifications + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Dashboard Notification\n    </button>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p>The <strong>Dashboard Notification</strong> module lets you create banner messages that appear at the top of every page.<br/>\n    Use these banners to communicate important updates — like <strong>new feature announcements</strong> or <strong>known issues</strong> — directly to your active users. </p>\n  </div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"7\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    stateKey=\"pw-table.admin-login-notifications-list\"\n    stateStorage=\"session\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n    [value]=\"data.notifications\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template #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=\"login-notifications-list-search\"\n            name=\"login-notifications-list-search\"\n            pInputText\n            placeholder=\"Search notifications...\"\n            [(ngModel)]=\"searchText\"\n            (input)=\"onSearchChange($any($event.target).value)\"\n            aria-label=\"Search notifications...\" />\n        </p-iconfield>\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"notification_type\">\n          {{ 'Admin.LoginNotification.NotificationType' | transloco }}\n          <p-sort-icon field=\"notification_type\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Admin.LoginNotification.Body' | transloco }}\n          <p-sort-icon field=\"body\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\">\n          {{ 'Admin.LoginNotification.IsPermanent' | transloco }}\n        </th>\n        <th pResizableColumn scope=\"true\"\n          class=\"w-25\">\n          {{ 'Admin.LoginNotification.FeatureKeys' | transloco }}\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"visible_from\">\n          {{ 'Admin.LoginNotification.VisibleFrom' | transloco }}\n          <p-sort-icon field=\"visible_from\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"visible_until\">\n          {{ 'Admin.LoginNotification.VisibleUntil' | transloco }}\n          <p-sort-icon field=\"visible_until\"></p-sort-icon>\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"notification_type\" [attr.data-label]=\"'Admin.LoginNotification.NotificationType' | transloco\">\n          @if (item?.notification_type) {\n            <span\n              class=\"badge\"\n              [ngClass]=\"'bg-' + item.notification_type\">\n              {{ item.notification_type }}\n            </span>\n          }\n        </td>\n        <td\n          data-head=\"body\" [attr.data-label]=\"'Admin.LoginNotification.Body' | transloco\"\n          >\n          <span [pTooltip]=\"item?.body\"\n            tooltipStyleClass=\"custom-tooltip\"\n          tooltipPosition=\"top\"  appendTo=\"body\"> {{ item?.body | textTruncate: 30 }}</span>\n\n        </td>\n        <td data-head=\"Is Permanent\" [attr.data-label]=\"'Admin.LoginNotification.IsPermanent' | transloco\">\n          <span [appDynamicBadge]=\"{\n                              itemsArray: [true, false],\n                              item: item?.is_permanent\n                          }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ item?.is_permanent ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"feature_keys\" [attr.data-label]=\"'Admin.LoginNotification.FeatureKeys' | transloco\">\n          @for (data of item?.feature_keys.slice(0, 3); track data) {\n            <span\n              class=\"badge m-1\"\n              [appDynamicBadge]=\"{ itemsArray: item?.feature_keys, item: data }\"\n              [colorByName]=\"true\"\n              [dataName]=\"data\"\n            color=\"cyan\">{{ data }}</span>\n          }\n\n          @if (item.expanded) {\n            <span>\n              @for (data of item?.feature_keys.slice(3); track data) {\n                <span\n                  class=\"badge m-1\"\n                  [appDynamicBadge]=\"{ itemsArray: item?.feature_keys, item: data }\"\n                  [colorByName]=\"true\"\n                  [dataName]=\"data\"\n                color=\"cyan\">{{ data }}</span>\n              }\n            </span>\n          }\n\n          @if (item?.feature_keys.length > 3) {\n            <span class=\"fw-bold\">\n              <a (click)=\"item.expanded = !item.expanded\">\n                <span>...</span>\n              </a>\n            </span>\n          }\n\n        </td>\n        <td\n          data-head=\"visible_from\" [attr.data-label]=\"'Admin.LoginNotification.VisibleFrom' | transloco\"\n          [ngClass]=\"{ 'text-success-muted fw-bold': isDateInPast(item?.visible_from) }\"\n          >\n          {{ item?.visible_from | dateFormat }}\n        </td>\n        <td\n          data-head=\"visible_until\" [attr.data-label]=\"'Admin.LoginNotification.VisibleUntil' | transloco\"\n          [ngClass]=\"{ 'text-success-muted fw-bold': isDateInFuture(item?.visible_until) }\"\n          >\n          {{ item?.visible_until | dateFormat }}\n        </td>\n        <td data-head=\"Action\" [attr.data-label]=\"'Label.Actions' | transloco\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n              [routerLink]=\"[routers.loginNotifications + item?.id]\"\n              class=\"me-2 me-sm-3\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              (keydown.enter)=\"onDelete(item?.id)\"\n              (click)=\"onDelete(item?.id)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @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]=\"tt?.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]=\"'Admin.LoginNotification.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n"
 		}]
 	}],
 	ctorParameters: () => [
@@ -22118,7 +22118,7 @@ var ResourcesIndexComponent = class ResourcesIndexComponent extends AppBaseCompo
 			selector: "pw-resources-index",
 			usesInheritance: true,
 			ngImport: i0,
-			template: "\n<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">{{'Resource.Posts.Title' | transloco}}</h2>\n    <button *rbacAllow=\"blogPermission\"\n      class=\"btn btn-sm btn-outline-primary\"\n      [routerLink]=\"['/' + routers.createResource]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{'Resource.Add' | transloco}}\n    </button>\n  </div>\n</div>\n<div class=\"col-12 mb-3\">\n  <p [innerHTML]=\"'Resource.Description' | transloco\"></p>\n</div>\n\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"9\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.posts\"\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      stateKey=\"pw-table.resources-index\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <ng-template #caption>\n      <div class=\"search-filter\">\n        <div class=\"col-sm-4\">\n          <p-multiselect class=\"pw-filter-select\" inputId=\"resources-index-tags\"\n            [showToggleAll]=\"true\"\n            [options]=\"tagOptions\"\n            [(ngModel)]=\"selectedTags\"\n            (onChange)=\"onTagChange($event)\"\n            placeholder=\"Filter by tags\"\n            [showHeader]=\"true\"\n            maxSelectedLabels=\"2\"\n            appendTo=\"body\">\n          </p-multiselect>\n        </div>\n        <div class=\"text-end\">\n          <label for=\"resources-index-search\" class=\"visually-hidden\">Search Resources</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=\"resources-index-search\"\n              name=\"resources-index-search\"\n              [(ngModel)]=\"searchTextItems\"\n              pInputText\n              placeholder=\"Search resources...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"search-input\"\n              aria-label=\"Search resources...\" />\n          </p-iconfield>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sort-icon field=\"title\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\">\n          {{ 'Resource.Posts.Tags' | transloco }}\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"showcase\">\n          {{ 'Resource.Posts.Showcase' | transloco }}\n          <p-sort-icon field=\"showcase\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"when\">\n          {{ 'Resource.Posts.When' | transloco }}\n          <p-sort-icon field=\"when\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"published_at\">\n          {{ 'Resource.Posts.PublishedAt' | transloco }}\n          <p-sort-icon field=\"published_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"accepted_at\">\n          {{ 'Resource.Posts.AcceptedAt' | transloco }}\n          <p-sort-icon field=\"accepted_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"view\">\n          {{ 'Resource.Posts.View' | transloco }}\n          <p-sort-icon field=\"view\"></p-sort-icon>\n        </th>\n        <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/members', item.author?.slug]\"\n            class=\"d-flex align-items-center\">\n            @if (item.author?.avatar) {\n              <img\n                [src]=\"item.author?.avatar[0].url\"\n                alt=\"author\"\n                width=\"25\"\n                class=\"img-fluid\" />\n            }\n            @if (!item.author?.avatar) {\n              <img\n                src=\"assets/img/icons/male.png\"\n                alt=\"author\"\n                width=\"25\"\n                class=\"img-fluid\" />\n            }\n            <span class=\"ms-2\">{{ item.author | ifNameNullShowEmail }}</span>\n          </a>\n        </td>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/resources/view', item?.slug]\"\n          target=\"_blank\">{{ item.title }}</a>\n        </td>\n        <td data-head=\"tags\">\n          @for (tag of item?.tags?.slice(0, 3); track tag) {\n            <span\n              class=\"badge m-1\"\n              [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n              [colorByName]=\"true\"\n              [dataName]=\"tag.name\"\n            color=\"cyan\">{{ tag.name }}</span>\n          }\n\n          @if (item.expandedTags) {\n            <span>\n              @for (tag of item?.tags?.slice(3); track tag) {\n                <span\n                  class=\"badge m-1\"\n                  [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n                  [colorByName]=\"true\"\n                  [dataName]=\"tag.name\"\n                color=\"cyan\" >{{ tag.name }}</span>\n              }\n            </span>\n          }\n\n          @if (item?.tags?.length > 3) {\n            <span class=\"fw-bold\">\n              <a (click)=\"item.expandedTags = !item.expandedTags\">\n                <span>...</span>\n              </a>\n            </span>\n          }\n        </td>\n\n        <td data-head=\"showcase\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.showcase }\"\n            [ngClass]=\"item?.showcase ? 'bg-success' : 'bg-secondary'\"\n          class=\"badge\">{{ !!item?.showcase }}</span>\n        </td>\n        <td data-head=\"when\">{{ item.when | dateFormat }}</td>\n        <td data-head=\"Published At\">{{ item.published_at | dateFormat }}</td>\n        <td data-head=\"Accepted At\">{{ item.accepted_at | dateFormat }}</td>\n        <td data-head=\"View\">{{ item.view }}</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=\"blogPermission\"\n              (keydown.enter)=\"navigateToResourceDetails(item)\"\n              (click)=\"navigateToResourceDetails(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=\"blogPermission\"\n              (keydown.enter)=\"onDeletePost(item)\"\n              (click)=\"onDeletePost(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Insight\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"isBlogAdmin\"\n              [routerLink]=\"[\n                                '/' + routers.resourcesList + item.id + '/insight'\n                            ]\"\n              [queryParams]=\"{ insight_name: item?.title }\">\n              <i class=\"fa fa-fw fa-list fa-lg\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (data.object_count !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n  }\n  @if (data.object_count === 0 && isLoaded) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\"  >\n      </pw-no-data>\n    </div>\n  }\n</div>\n<div class=\"col-12 text-center\">\n  @if (data.unfiltered_count === 0 && isLoaded) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n      >\n    </pw-no-data>\n  }\n</div>\n",
+			template: "\n<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">{{'Resource.Posts.Title' | transloco}}</h2>\n    <button *rbacAllow=\"blogPermission\"\n      class=\"btn btn-sm btn-outline-primary\"\n      [routerLink]=\"['/' + routers.createResource]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{'Resource.Add' | transloco}}\n    </button>\n  </div>\n</div>\n<div class=\"col-12 mb-3\">\n  <p [innerHTML]=\"'Resource.Description' | transloco\"></p>\n</div>\n\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"9\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.posts\"\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      stateKey=\"pw-table.resources-index\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <ng-template #caption>\n      <div class=\"search-filter\">\n        <div class=\"col-sm-4\">\n          <p-multiselect class=\"pw-filter-select\" inputId=\"resources-index-tags\"\n            [showToggleAll]=\"true\"\n            [options]=\"tagOptions\"\n            [(ngModel)]=\"selectedTags\"\n            (onChange)=\"onTagChange($event)\"\n            placeholder=\"Filter by tags\"\n            [showHeader]=\"true\"\n            maxSelectedLabels=\"2\"\n            appendTo=\"body\">\n          </p-multiselect>\n        </div>\n        <div class=\"text-end\">\n          <label for=\"resources-index-search\" class=\"visually-hidden\">Search Resources</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=\"resources-index-search\"\n              name=\"resources-index-search\"\n              [(ngModel)]=\"searchTextItems\"\n              pInputText\n              placeholder=\"Search resources...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"search-input\"\n              aria-label=\"Search resources...\" />\n          </p-iconfield>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sort-icon field=\"title\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\">\n          {{ 'Resource.Posts.Tags' | transloco }}\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"showcase\">\n          {{ 'Resource.Posts.Showcase' | transloco }}\n          <p-sort-icon field=\"showcase\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"when\">\n          {{ 'Resource.Posts.When' | transloco }}\n          <p-sort-icon field=\"when\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"published_at\">\n          {{ 'Resource.Posts.PublishedAt' | transloco }}\n          <p-sort-icon field=\"published_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"accepted_at\">\n          {{ 'Resource.Posts.AcceptedAt' | transloco }}\n          <p-sort-icon field=\"accepted_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"view\">\n          {{ 'Resource.Posts.View' | transloco }}\n          <p-sort-icon field=\"view\"></p-sort-icon>\n        </th>\n        <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"Title\" [attr.data-label]=\"'Resource.Posts.Author' | transloco\">\n          <a [routerLink]=\"['/members', item.author?.slug]\"\n            class=\"d-flex align-items-center\">\n            @if (item.author?.avatar) {\n              <img\n                [src]=\"item.author?.avatar[0].url\"\n                alt=\"author\"\n                width=\"25\"\n                class=\"img-fluid\" />\n            }\n            @if (!item.author?.avatar) {\n              <img\n                src=\"assets/img/icons/male.png\"\n                alt=\"author\"\n                width=\"25\"\n                class=\"img-fluid\" />\n            }\n            <span class=\"ms-2\">{{ item.author | ifNameNullShowEmail }}</span>\n          </a>\n        </td>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/resources/view', item?.slug]\"\n          target=\"_blank\">{{ item.title }}</a>\n        </td>\n        <td data-head=\"tags\" [attr.data-label]=\"'Resource.Posts.Tags' | transloco\">\n          @for (tag of item?.tags?.slice(0, 3); track tag) {\n            <span\n              class=\"badge m-1\"\n              [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n              [colorByName]=\"true\"\n              [dataName]=\"tag.name\"\n            color=\"cyan\">{{ tag.name }}</span>\n          }\n\n          @if (item.expandedTags) {\n            <span>\n              @for (tag of item?.tags?.slice(3); track tag) {\n                <span\n                  class=\"badge m-1\"\n                  [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n                  [colorByName]=\"true\"\n                  [dataName]=\"tag.name\"\n                color=\"cyan\" >{{ tag.name }}</span>\n              }\n            </span>\n          }\n\n          @if (item?.tags?.length > 3) {\n            <span class=\"fw-bold\">\n              <a (click)=\"item.expandedTags = !item.expandedTags\">\n                <span>...</span>\n              </a>\n            </span>\n          }\n        </td>\n\n        <td data-head=\"showcase\" [attr.data-label]=\"'Resource.Posts.Showcase' | transloco\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.showcase }\"\n            [ngClass]=\"item?.showcase ? 'bg-success' : 'bg-secondary'\"\n          class=\"badge\">{{ !!item?.showcase }}</span>\n        </td>\n        <td data-head=\"when\" [attr.data-label]=\"'Resource.Posts.When' | transloco\">{{ item.when | dateFormat }}</td>\n        <td data-head=\"Published At\">{{ item.published_at | dateFormat }}</td>\n        <td data-head=\"Accepted At\">{{ item.accepted_at | dateFormat }}</td>\n        <td data-head=\"View\">{{ item.view }}</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=\"blogPermission\"\n              (keydown.enter)=\"navigateToResourceDetails(item)\"\n              (click)=\"navigateToResourceDetails(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=\"blogPermission\"\n              (keydown.enter)=\"onDeletePost(item)\"\n              (click)=\"onDeletePost(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Insight\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"isBlogAdmin\"\n              [routerLink]=\"[\n                                '/' + routers.resourcesList + item.id + '/insight'\n                            ]\"\n              [queryParams]=\"{ insight_name: item?.title }\">\n              <i class=\"fa fa-fw fa-list fa-lg\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (data.object_count !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n  }\n  @if (data.object_count === 0 && isLoaded) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\"  >\n      </pw-no-data>\n    </div>\n  }\n</div>\n<div class=\"col-12 text-center\">\n  @if (data.unfiltered_count === 0 && isLoaded) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n      >\n    </pw-no-data>\n  }\n</div>\n",
 			styles: [".search-input{max-width:90%}\n"],
 			dependencies: [
 				{
@@ -22519,7 +22519,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-resources-index",
 			standalone: false,
-			template: "\n<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">{{'Resource.Posts.Title' | transloco}}</h2>\n    <button *rbacAllow=\"blogPermission\"\n      class=\"btn btn-sm btn-outline-primary\"\n      [routerLink]=\"['/' + routers.createResource]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{'Resource.Add' | transloco}}\n    </button>\n  </div>\n</div>\n<div class=\"col-12 mb-3\">\n  <p [innerHTML]=\"'Resource.Description' | transloco\"></p>\n</div>\n\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"9\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.posts\"\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      stateKey=\"pw-table.resources-index\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <ng-template #caption>\n      <div class=\"search-filter\">\n        <div class=\"col-sm-4\">\n          <p-multiselect class=\"pw-filter-select\" inputId=\"resources-index-tags\"\n            [showToggleAll]=\"true\"\n            [options]=\"tagOptions\"\n            [(ngModel)]=\"selectedTags\"\n            (onChange)=\"onTagChange($event)\"\n            placeholder=\"Filter by tags\"\n            [showHeader]=\"true\"\n            maxSelectedLabels=\"2\"\n            appendTo=\"body\">\n          </p-multiselect>\n        </div>\n        <div class=\"text-end\">\n          <label for=\"resources-index-search\" class=\"visually-hidden\">Search Resources</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=\"resources-index-search\"\n              name=\"resources-index-search\"\n              [(ngModel)]=\"searchTextItems\"\n              pInputText\n              placeholder=\"Search resources...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"search-input\"\n              aria-label=\"Search resources...\" />\n          </p-iconfield>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sort-icon field=\"title\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\">\n          {{ 'Resource.Posts.Tags' | transloco }}\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"showcase\">\n          {{ 'Resource.Posts.Showcase' | transloco }}\n          <p-sort-icon field=\"showcase\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"when\">\n          {{ 'Resource.Posts.When' | transloco }}\n          <p-sort-icon field=\"when\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"published_at\">\n          {{ 'Resource.Posts.PublishedAt' | transloco }}\n          <p-sort-icon field=\"published_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"accepted_at\">\n          {{ 'Resource.Posts.AcceptedAt' | transloco }}\n          <p-sort-icon field=\"accepted_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"view\">\n          {{ 'Resource.Posts.View' | transloco }}\n          <p-sort-icon field=\"view\"></p-sort-icon>\n        </th>\n        <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/members', item.author?.slug]\"\n            class=\"d-flex align-items-center\">\n            @if (item.author?.avatar) {\n              <img\n                [src]=\"item.author?.avatar[0].url\"\n                alt=\"author\"\n                width=\"25\"\n                class=\"img-fluid\" />\n            }\n            @if (!item.author?.avatar) {\n              <img\n                src=\"assets/img/icons/male.png\"\n                alt=\"author\"\n                width=\"25\"\n                class=\"img-fluid\" />\n            }\n            <span class=\"ms-2\">{{ item.author | ifNameNullShowEmail }}</span>\n          </a>\n        </td>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/resources/view', item?.slug]\"\n          target=\"_blank\">{{ item.title }}</a>\n        </td>\n        <td data-head=\"tags\">\n          @for (tag of item?.tags?.slice(0, 3); track tag) {\n            <span\n              class=\"badge m-1\"\n              [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n              [colorByName]=\"true\"\n              [dataName]=\"tag.name\"\n            color=\"cyan\">{{ tag.name }}</span>\n          }\n\n          @if (item.expandedTags) {\n            <span>\n              @for (tag of item?.tags?.slice(3); track tag) {\n                <span\n                  class=\"badge m-1\"\n                  [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n                  [colorByName]=\"true\"\n                  [dataName]=\"tag.name\"\n                color=\"cyan\" >{{ tag.name }}</span>\n              }\n            </span>\n          }\n\n          @if (item?.tags?.length > 3) {\n            <span class=\"fw-bold\">\n              <a (click)=\"item.expandedTags = !item.expandedTags\">\n                <span>...</span>\n              </a>\n            </span>\n          }\n        </td>\n\n        <td data-head=\"showcase\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.showcase }\"\n            [ngClass]=\"item?.showcase ? 'bg-success' : 'bg-secondary'\"\n          class=\"badge\">{{ !!item?.showcase }}</span>\n        </td>\n        <td data-head=\"when\">{{ item.when | dateFormat }}</td>\n        <td data-head=\"Published At\">{{ item.published_at | dateFormat }}</td>\n        <td data-head=\"Accepted At\">{{ item.accepted_at | dateFormat }}</td>\n        <td data-head=\"View\">{{ item.view }}</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=\"blogPermission\"\n              (keydown.enter)=\"navigateToResourceDetails(item)\"\n              (click)=\"navigateToResourceDetails(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=\"blogPermission\"\n              (keydown.enter)=\"onDeletePost(item)\"\n              (click)=\"onDeletePost(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Insight\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"isBlogAdmin\"\n              [routerLink]=\"[\n                                '/' + routers.resourcesList + item.id + '/insight'\n                            ]\"\n              [queryParams]=\"{ insight_name: item?.title }\">\n              <i class=\"fa fa-fw fa-list fa-lg\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (data.object_count !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n  }\n  @if (data.object_count === 0 && isLoaded) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\"  >\n      </pw-no-data>\n    </div>\n  }\n</div>\n<div class=\"col-12 text-center\">\n  @if (data.unfiltered_count === 0 && isLoaded) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n      >\n    </pw-no-data>\n  }\n</div>\n",
+			template: "\n<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">{{'Resource.Posts.Title' | transloco}}</h2>\n    <button *rbacAllow=\"blogPermission\"\n      class=\"btn btn-sm btn-outline-primary\"\n      [routerLink]=\"['/' + routers.createResource]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{'Resource.Add' | transloco}}\n    </button>\n  </div>\n</div>\n<div class=\"col-12 mb-3\">\n  <p [innerHTML]=\"'Resource.Description' | transloco\"></p>\n</div>\n\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"9\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\" [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.posts\"\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      stateKey=\"pw-table.resources-index\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <ng-template #caption>\n      <div class=\"search-filter\">\n        <div class=\"col-sm-4\">\n          <p-multiselect class=\"pw-filter-select\" inputId=\"resources-index-tags\"\n            [showToggleAll]=\"true\"\n            [options]=\"tagOptions\"\n            [(ngModel)]=\"selectedTags\"\n            (onChange)=\"onTagChange($event)\"\n            placeholder=\"Filter by tags\"\n            [showHeader]=\"true\"\n            maxSelectedLabels=\"2\"\n            appendTo=\"body\">\n          </p-multiselect>\n        </div>\n        <div class=\"text-end\">\n          <label for=\"resources-index-search\" class=\"visually-hidden\">Search Resources</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=\"resources-index-search\"\n              name=\"resources-index-search\"\n              [(ngModel)]=\"searchTextItems\"\n              pInputText\n              placeholder=\"Search resources...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"search-input\"\n              aria-label=\"Search resources...\" />\n          </p-iconfield>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sort-icon field=\"title\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\">\n          {{ 'Resource.Posts.Tags' | transloco }}\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"showcase\">\n          {{ 'Resource.Posts.Showcase' | transloco }}\n          <p-sort-icon field=\"showcase\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"when\">\n          {{ 'Resource.Posts.When' | transloco }}\n          <p-sort-icon field=\"when\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"published_at\">\n          {{ 'Resource.Posts.PublishedAt' | transloco }}\n          <p-sort-icon field=\"published_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"accepted_at\">\n          {{ 'Resource.Posts.AcceptedAt' | transloco }}\n          <p-sort-icon field=\"accepted_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"view\">\n          {{ 'Resource.Posts.View' | transloco }}\n          <p-sort-icon field=\"view\"></p-sort-icon>\n        </th>\n        <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"Title\" [attr.data-label]=\"'Resource.Posts.Author' | transloco\">\n          <a [routerLink]=\"['/members', item.author?.slug]\"\n            class=\"d-flex align-items-center\">\n            @if (item.author?.avatar) {\n              <img\n                [src]=\"item.author?.avatar[0].url\"\n                alt=\"author\"\n                width=\"25\"\n                class=\"img-fluid\" />\n            }\n            @if (!item.author?.avatar) {\n              <img\n                src=\"assets/img/icons/male.png\"\n                alt=\"author\"\n                width=\"25\"\n                class=\"img-fluid\" />\n            }\n            <span class=\"ms-2\">{{ item.author | ifNameNullShowEmail }}</span>\n          </a>\n        </td>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/resources/view', item?.slug]\"\n          target=\"_blank\">{{ item.title }}</a>\n        </td>\n        <td data-head=\"tags\" [attr.data-label]=\"'Resource.Posts.Tags' | transloco\">\n          @for (tag of item?.tags?.slice(0, 3); track tag) {\n            <span\n              class=\"badge m-1\"\n              [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n              [colorByName]=\"true\"\n              [dataName]=\"tag.name\"\n            color=\"cyan\">{{ tag.name }}</span>\n          }\n\n          @if (item.expandedTags) {\n            <span>\n              @for (tag of item?.tags?.slice(3); track tag) {\n                <span\n                  class=\"badge m-1\"\n                  [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n                  [colorByName]=\"true\"\n                  [dataName]=\"tag.name\"\n                color=\"cyan\" >{{ tag.name }}</span>\n              }\n            </span>\n          }\n\n          @if (item?.tags?.length > 3) {\n            <span class=\"fw-bold\">\n              <a (click)=\"item.expandedTags = !item.expandedTags\">\n                <span>...</span>\n              </a>\n            </span>\n          }\n        </td>\n\n        <td data-head=\"showcase\" [attr.data-label]=\"'Resource.Posts.Showcase' | transloco\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.showcase }\"\n            [ngClass]=\"item?.showcase ? 'bg-success' : 'bg-secondary'\"\n          class=\"badge\">{{ !!item?.showcase }}</span>\n        </td>\n        <td data-head=\"when\" [attr.data-label]=\"'Resource.Posts.When' | transloco\">{{ item.when | dateFormat }}</td>\n        <td data-head=\"Published At\">{{ item.published_at | dateFormat }}</td>\n        <td data-head=\"Accepted At\">{{ item.accepted_at | dateFormat }}</td>\n        <td data-head=\"View\">{{ item.view }}</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=\"blogPermission\"\n              (keydown.enter)=\"navigateToResourceDetails(item)\"\n              (click)=\"navigateToResourceDetails(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=\"blogPermission\"\n              (keydown.enter)=\"onDeletePost(item)\"\n              (click)=\"onDeletePost(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li pTooltip=\"Insight\" tooltipPosition=\"top\" appendTo=\"body\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"isBlogAdmin\"\n              [routerLink]=\"[\n                                '/' + routers.resourcesList + item.id + '/insight'\n                            ]\"\n              [queryParams]=\"{ insight_name: item?.title }\">\n              <i class=\"fa fa-fw fa-list fa-lg\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (data.object_count !== 0) {\n    <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n  }\n  @if (data.object_count === 0 && isLoaded) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\"  >\n      </pw-no-data>\n    </div>\n  }\n</div>\n<div class=\"col-12 text-center\">\n  @if (data.unfiltered_count === 0 && isLoaded) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n      >\n    </pw-no-data>\n  }\n</div>\n",
 			styles: [".search-input{max-width:90%}\n"]
 		}]
 	}],
@@ -27324,7 +27324,7 @@ var SubscriptionInsightNpsComponent = class SubscriptionInsightNpsComponent exte
 			}],
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<app-date-picker\n  [selectedDateRange]=\"selectedDateRange\"\n  [dateRanges]=\"dateRanges\"\n  (dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n@if (graphLoading && !graph) {\n  <pw-skeleton-chart class=\"d-block mt-3\" />\n}\n\n@if (graph) {\n  <div [class.opacity-50]=\"graphLoading\" [attr.aria-busy]=\"graphLoading\">\n    <plotly-plot [data]=\"graph?.data\"\n      [config]=\"graph?.config\"\n      [layout]=\"graph?.layout\" [useResizeHandler]=\"true\"></plotly-plot>\n  </div>\n}\n\n<div class=\"row m-0\">\n  <h2 class=\"card-title p-0 my-4\">User Feedbacks</h2>\n</div>\n\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"7\" [showCaption]=\"false\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n  [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"totalRecords === 0\">\n  <p-table #tt\n    [value]=\"feedbacks\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n      stateKey=\"pw-table.subscription-insight-nps\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"created_at\">\n          Created At\n          <p-sort-icon field=\"created_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\">User Name</th>\n        <th pResizableColumn scope=\"true\">Product Name</th>\n        <th pResizableColumn scope=\"true\">Feedback Question Name</th>\n        <th pResizableColumn scope=\"true\">Comment</th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"value\">\n          Value\n          <p-sort-icon field=\"value\"></p-sort-icon>\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">Action</th>\n      </tr>\n    </ng-template>\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"user_name\">\n          <a [routerLink]=\"['/members/' + item.user_slug]\">{{ item?.user_name }}</a>\n        </td>\n        <td data-head=\"product_name\">{{ item?.product_name }}</td>\n        <td data-head=\"feedback_question_name\">{{ item?.feedback_question_name }}</td>\n        <td data-head=\"comment\">\n          @if (item?.comment) {\n            <button\n              class=\"btn btn-sm btn-info\"\n              (click)=\"openComment(item?.comment)\">\n              Display\n            </button>\n          }\n        </td>\n        <td data-head=\"value\">\n          <span [ngClass]=\"{'fw-bold text-danger':item?.value <= 6,'fw-bold text-success-muted':item.value>8}\">\n            {{ item?.value }}\n          </span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            @if (currentUser && item.user_id !== currentUser.id) {\n              <li pTooltip=\"Send Chat Message\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\n                *rbacAllow=\"'Pages.Chat'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"item.user_slug\">\n                <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n              </li>\n            }\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (totalRecords !== 0) {\n    <pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n  }\n</div>\n@if (totalRecords === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" message=\"No Feedback Found\"> </pw-no-data>\n  </div>\n}\n\n<ng-template #showComment\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"mb-0\">Comment</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h6 class=\"text-center modal-basic-title\">{{ commentToShow }}</h6>\n  </div>\n</ng-template>\n",
+			template: "<app-date-picker\n  [selectedDateRange]=\"selectedDateRange\"\n  [dateRanges]=\"dateRanges\"\n  (dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n@if (graphLoading && !graph) {\n  <pw-skeleton-chart class=\"d-block mt-3\" />\n}\n\n@if (graph) {\n  <div [class.opacity-50]=\"graphLoading\" [attr.aria-busy]=\"graphLoading\">\n    <plotly-plot [data]=\"graph?.data\"\n      [config]=\"graph?.config\"\n      [layout]=\"graph?.layout\" [useResizeHandler]=\"true\"></plotly-plot>\n  </div>\n}\n\n<div class=\"row m-0\">\n  <h2 class=\"card-title p-0 my-4\">User Feedbacks</h2>\n</div>\n\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"7\" [showCaption]=\"false\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n  [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"totalRecords === 0\">\n  <p-table #tt\n    [value]=\"feedbacks\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n      stateKey=\"pw-table.subscription-insight-nps\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"created_at\">\n          Created At\n          <p-sort-icon field=\"created_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\">User Name</th>\n        <th pResizableColumn scope=\"true\">Product Name</th>\n        <th pResizableColumn scope=\"true\">Feedback Question Name</th>\n        <th pResizableColumn scope=\"true\">Comment</th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"value\">\n          Value\n          <p-sort-icon field=\"value\"></p-sort-icon>\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">Action</th>\n      </tr>\n    </ng-template>\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"created_at\" data-label=\"Created At\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"user_name\" data-label=\"User Name\">\n          <a [routerLink]=\"['/members/' + item.user_slug]\">{{ item?.user_name }}</a>\n        </td>\n        <td data-head=\"product_name\" data-label=\"Product Name\">{{ item?.product_name }}</td>\n        <td data-head=\"feedback_question_name\" data-label=\"Feedback Question Name\">{{ item?.feedback_question_name }}</td>\n        <td data-head=\"comment\" data-label=\"Comment\">\n          @if (item?.comment) {\n            <button\n              class=\"btn btn-sm btn-info\"\n              (click)=\"openComment(item?.comment)\">\n              Display\n            </button>\n          }\n        </td>\n        <td data-head=\"value\" data-label=\"Value\">\n          <span [ngClass]=\"{'fw-bold text-danger':item?.value <= 6,'fw-bold text-success-muted':item.value>8}\">\n            {{ item?.value }}\n          </span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            @if (currentUser && item.user_id !== currentUser.id) {\n              <li pTooltip=\"Send Chat Message\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\n                *rbacAllow=\"'Pages.Chat'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"item.user_slug\">\n                <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n              </li>\n            }\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (totalRecords !== 0) {\n    <pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n  }\n</div>\n@if (totalRecords === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" message=\"No Feedback Found\"> </pw-no-data>\n  </div>\n}\n\n<ng-template #showComment\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"mb-0\">Comment</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h6 class=\"text-center modal-basic-title\">{{ commentToShow }}</h6>\n  </div>\n</ng-template>\n",
 			dependencies: [
 				{
 					kind: "component",
@@ -27649,7 +27649,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-subscription-insight-nps",
 			standalone: false,
-			template: "<app-date-picker\n  [selectedDateRange]=\"selectedDateRange\"\n  [dateRanges]=\"dateRanges\"\n  (dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n@if (graphLoading && !graph) {\n  <pw-skeleton-chart class=\"d-block mt-3\" />\n}\n\n@if (graph) {\n  <div [class.opacity-50]=\"graphLoading\" [attr.aria-busy]=\"graphLoading\">\n    <plotly-plot [data]=\"graph?.data\"\n      [config]=\"graph?.config\"\n      [layout]=\"graph?.layout\" [useResizeHandler]=\"true\"></plotly-plot>\n  </div>\n}\n\n<div class=\"row m-0\">\n  <h2 class=\"card-title p-0 my-4\">User Feedbacks</h2>\n</div>\n\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"7\" [showCaption]=\"false\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n  [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"totalRecords === 0\">\n  <p-table #tt\n    [value]=\"feedbacks\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n      stateKey=\"pw-table.subscription-insight-nps\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"created_at\">\n          Created At\n          <p-sort-icon field=\"created_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\">User Name</th>\n        <th pResizableColumn scope=\"true\">Product Name</th>\n        <th pResizableColumn scope=\"true\">Feedback Question Name</th>\n        <th pResizableColumn scope=\"true\">Comment</th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"value\">\n          Value\n          <p-sort-icon field=\"value\"></p-sort-icon>\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">Action</th>\n      </tr>\n    </ng-template>\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"user_name\">\n          <a [routerLink]=\"['/members/' + item.user_slug]\">{{ item?.user_name }}</a>\n        </td>\n        <td data-head=\"product_name\">{{ item?.product_name }}</td>\n        <td data-head=\"feedback_question_name\">{{ item?.feedback_question_name }}</td>\n        <td data-head=\"comment\">\n          @if (item?.comment) {\n            <button\n              class=\"btn btn-sm btn-info\"\n              (click)=\"openComment(item?.comment)\">\n              Display\n            </button>\n          }\n        </td>\n        <td data-head=\"value\">\n          <span [ngClass]=\"{'fw-bold text-danger':item?.value <= 6,'fw-bold text-success-muted':item.value>8}\">\n            {{ item?.value }}\n          </span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            @if (currentUser && item.user_id !== currentUser.id) {\n              <li pTooltip=\"Send Chat Message\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\n                *rbacAllow=\"'Pages.Chat'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"item.user_slug\">\n                <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n              </li>\n            }\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (totalRecords !== 0) {\n    <pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n  }\n</div>\n@if (totalRecords === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" message=\"No Feedback Found\"> </pw-no-data>\n  </div>\n}\n\n<ng-template #showComment\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"mb-0\">Comment</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h6 class=\"text-center modal-basic-title\">{{ commentToShow }}</h6>\n  </div>\n</ng-template>\n"
+			template: "<app-date-picker\n  [selectedDateRange]=\"selectedDateRange\"\n  [dateRanges]=\"dateRanges\"\n  (dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n@if (graphLoading && !graph) {\n  <pw-skeleton-chart class=\"d-block mt-3\" />\n}\n\n@if (graph) {\n  <div [class.opacity-50]=\"graphLoading\" [attr.aria-busy]=\"graphLoading\">\n    <plotly-plot [data]=\"graph?.data\"\n      [config]=\"graph?.config\"\n      [layout]=\"graph?.layout\" [useResizeHandler]=\"true\"></plotly-plot>\n  </div>\n}\n\n<div class=\"row m-0\">\n  <h2 class=\"card-title p-0 my-4\">User Feedbacks</h2>\n</div>\n\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"7\" [showCaption]=\"false\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n  [class.d-none]=\"!isLoaded\"\n  [class.hideTable]=\"totalRecords === 0\">\n  <p-table #tt\n    [value]=\"feedbacks\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n      stateKey=\"pw-table.subscription-insight-nps\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n    <ng-template #header>\n      <tr>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"created_at\">\n          Created At\n          <p-sort-icon field=\"created_at\"></p-sort-icon>\n        </th>\n        <th pResizableColumn scope=\"true\">User Name</th>\n        <th pResizableColumn scope=\"true\">Product Name</th>\n        <th pResizableColumn scope=\"true\">Feedback Question Name</th>\n        <th pResizableColumn scope=\"true\">Comment</th>\n        <th pResizableColumn scope=\"true\"\n          pSortableColumn=\"value\">\n          Value\n          <p-sort-icon field=\"value\"></p-sort-icon>\n        </th>\n        <th class=\"actions-list-two\"\n        scope=\"true\">Action</th>\n      </tr>\n    </ng-template>\n    <!-- Table Body -->\n    <ng-template #body\n      let-item>\n      <tr>\n        <td data-head=\"created_at\" data-label=\"Created At\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"user_name\" data-label=\"User Name\">\n          <a [routerLink]=\"['/members/' + item.user_slug]\">{{ item?.user_name }}</a>\n        </td>\n        <td data-head=\"product_name\" data-label=\"Product Name\">{{ item?.product_name }}</td>\n        <td data-head=\"feedback_question_name\" data-label=\"Feedback Question Name\">{{ item?.feedback_question_name }}</td>\n        <td data-head=\"comment\" data-label=\"Comment\">\n          @if (item?.comment) {\n            <button\n              class=\"btn btn-sm btn-info\"\n              (click)=\"openComment(item?.comment)\">\n              Display\n            </button>\n          }\n        </td>\n        <td data-head=\"value\" data-label=\"Value\">\n          <span [ngClass]=\"{'fw-bold text-danger':item?.value <= 6,'fw-bold text-success-muted':item.value>8}\">\n            {{ item?.value }}\n          </span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            @if (currentUser && item.user_id !== currentUser.id) {\n              <li pTooltip=\"Send Chat Message\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\n                *rbacAllow=\"'Pages.Chat'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"item.user_slug\">\n                <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n              </li>\n            }\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (totalRecords !== 0) {\n    <pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n  }\n</div>\n@if (totalRecords === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" message=\"No Feedback Found\"> </pw-no-data>\n  </div>\n}\n\n<ng-template #showComment\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"mb-0\">Comment</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h6 class=\"text-center modal-basic-title\">{{ commentToShow }}</h6>\n  </div>\n</ng-template>\n"
 		}]
 	}],
 	ctorParameters: () => [
@@ -29623,7 +29623,7 @@ var SubscriptionsListComponent = class SubscriptionsListComponent extends AppBas
 			}],
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<div class=\"row\">\n  <div\n    class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Subscriptions</h2>\n    <a class=\"btn btn-sm btn-outline-primary\"\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  @if (!isLoaded) {\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"14\" [showCaption]=\"true\" />\n  }\n  <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\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      (onStateRestore)=\"onStateRestore($event)\"\n      stateKey=\"pw-table.admin-subscriptions-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [customSort]=\"true\">\n      <ng-template #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 class=\"pw-filter-select\" inputId=\"subscriptions-list-feature-keys\"\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)=\"dt.filter($event.value, 'featureKeys', 'equals')\"\n              appendTo=\"body\">\n            </p-multiselect>\n          </div>\n          <div class=\"col-12 col-sm-4\">\n            <p-select class=\"pw-filter-select\"\n              inputId=\"subscriptions-list-status\"\n              [options]=\"subscriptionStatus\"\n              [placeholder]=\"'Filter by status'\"\n              (onChange)=\"dt.filter($event.value, 'status', 'equals')\"\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                aria-label=\"Search subscriptions...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Subscriptions.Id' | transloco }}\n            <p-sort-icon field=\"id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"organisation\">\n            {{ 'Admin.Subscriptions.Organization' | transloco }}\n            <p-sort-icon field=\"organisation\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"contact_name\">\n            {{ 'Admin.Subscriptions.ContactName' | transloco }}\n            <p-sort-icon field=\"contact_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"contact_email\">\n            {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n            <p-sort-icon field=\"contact_email\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"stripe_customer_id\">\n            {{ 'Admin.Subscriptions.Paid' | transloco }}\n            <p-sort-icon field=\"stripe_customer_id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n          <th pResizableColumn scope=\"true\"\n            class=\"expires-at-width\">\n            {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_total\">\n            {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n            <p-sort-icon field=\"sessions_total\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sort-icon field=\"sessions_last_month\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"deleted_at\">\n            {{ 'Admin.Subscriptions.Deleted' | transloco }}\n            <p-sort-icon field=\"deleted_at\"></p-sort-icon>\n          </th>\n          <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template #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",
+			template: "<div class=\"row\">\n  <div\n    class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Subscriptions</h2>\n    <a class=\"btn btn-sm btn-outline-primary\"\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  @if (!isLoaded) {\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"14\" [showCaption]=\"true\" />\n  }\n  <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\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      (onStateRestore)=\"onStateRestore($event)\"\n      stateKey=\"pw-table.admin-subscriptions-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [customSort]=\"true\">\n      <ng-template #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 class=\"pw-filter-select\" inputId=\"subscriptions-list-feature-keys\"\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)=\"dt.filter($event.value, 'featureKeys', 'equals')\"\n              appendTo=\"body\">\n            </p-multiselect>\n          </div>\n          <div class=\"col-12 col-sm-4\">\n            <p-select class=\"pw-filter-select\"\n              inputId=\"subscriptions-list-status\"\n              [options]=\"subscriptionStatus\"\n              [placeholder]=\"'Filter by status'\"\n              (onChange)=\"dt.filter($event.value, 'status', 'equals')\"\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                aria-label=\"Search subscriptions...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Subscriptions.Id' | transloco }}\n            <p-sort-icon field=\"id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"organisation\">\n            {{ 'Admin.Subscriptions.Organization' | transloco }}\n            <p-sort-icon field=\"organisation\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"contact_name\">\n            {{ 'Admin.Subscriptions.ContactName' | transloco }}\n            <p-sort-icon field=\"contact_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"contact_email\">\n            {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n            <p-sort-icon field=\"contact_email\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"stripe_customer_id\">\n            {{ 'Admin.Subscriptions.Paid' | transloco }}\n            <p-sort-icon field=\"stripe_customer_id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n          <th pResizableColumn scope=\"true\"\n            class=\"expires-at-width\">\n            {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_total\">\n            {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n            <p-sort-icon field=\"sessions_total\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sort-icon field=\"sessions_last_month\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"deleted_at\">\n            {{ 'Admin.Subscriptions.Deleted' | transloco }}\n            <p-sort-icon field=\"deleted_at\"></p-sort-icon>\n          </th>\n          <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template #body\n        let-item>\n        <tr>\n          <td data-head=\"id\" [attr.data-label]=\"'Admin.Subscriptions.Id' | transloco\">{{ item.id }}</td>\n          <td data-head=\"Organization\" [attr.data-label]=\"'Admin.Subscriptions.Organization' | transloco\">\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\" [attr.data-label]=\"'Admin.Subscriptions.ContactName' | transloco\" 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\" [attr.data-label]=\"'Admin.Subscriptions.ContactEmail' | transloco\">\n            <span [pTooltip]=\"item.contact_email\" tooltipPosition=\"top\" appendTo=\"body\">{{ item.contact_email | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"Name\" [attr.data-label]=\"'Admin.Subscriptions.Product' | transloco\">\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\" [attr.data-label]=\"'Admin.Subscriptions.Currency' | transloco\">\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\" [attr.data-label]=\"'Admin.Subscriptions.PricePerMonth' | transloco\">\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\" [attr.data-label]=\"'Admin.Subscriptions.Paid' | transloco\">\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\" [attr.data-label]=\"'Admin.Subscriptions.Billing' | transloco\">\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\" [attr.data-label]=\"'Admin.Subscriptions.ExpiresAt' | transloco\">\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#\" [attr.data-label]=\"'Admin.Subscriptions.SessionsTotal' | transloco\">{{ item?.sessions_total }}</td>\n          <td data-head=\"S/m #\" [attr.data-label]=\"'Admin.Subscriptions.SessionsTotalLastMonth' | transloco\">\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\" [attr.data-label]=\"'Admin.Subscriptions.Deleted' | transloco\">\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\" [attr.data-label]=\"'Label.Actions' | transloco\">\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}.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{display:inline;vertical-align:middle;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}}.table-responsive td{padding:6px 10px!important;font-size:12px!important;line-height:1.35;vertical-align:top;overflow-wrap: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{overflow-wrap:break-word!important}\n"],
 			dependencies: [
 				{
@@ -30116,7 +30116,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-subscriptions-list",
 			standalone: false,
-			template: "<div class=\"row\">\n  <div\n    class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Subscriptions</h2>\n    <a class=\"btn btn-sm btn-outline-primary\"\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  @if (!isLoaded) {\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"14\" [showCaption]=\"true\" />\n  }\n  <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\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      (onStateRestore)=\"onStateRestore($event)\"\n      stateKey=\"pw-table.admin-subscriptions-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [customSort]=\"true\">\n      <ng-template #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 class=\"pw-filter-select\" inputId=\"subscriptions-list-feature-keys\"\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)=\"dt.filter($event.value, 'featureKeys', 'equals')\"\n              appendTo=\"body\">\n            </p-multiselect>\n          </div>\n          <div class=\"col-12 col-sm-4\">\n            <p-select class=\"pw-filter-select\"\n              inputId=\"subscriptions-list-status\"\n              [options]=\"subscriptionStatus\"\n              [placeholder]=\"'Filter by status'\"\n              (onChange)=\"dt.filter($event.value, 'status', 'equals')\"\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                aria-label=\"Search subscriptions...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Subscriptions.Id' | transloco }}\n            <p-sort-icon field=\"id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"organisation\">\n            {{ 'Admin.Subscriptions.Organization' | transloco }}\n            <p-sort-icon field=\"organisation\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"contact_name\">\n            {{ 'Admin.Subscriptions.ContactName' | transloco }}\n            <p-sort-icon field=\"contact_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"contact_email\">\n            {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n            <p-sort-icon field=\"contact_email\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"stripe_customer_id\">\n            {{ 'Admin.Subscriptions.Paid' | transloco }}\n            <p-sort-icon field=\"stripe_customer_id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n          <th pResizableColumn scope=\"true\"\n            class=\"expires-at-width\">\n            {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_total\">\n            {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n            <p-sort-icon field=\"sessions_total\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sort-icon field=\"sessions_last_month\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"deleted_at\">\n            {{ 'Admin.Subscriptions.Deleted' | transloco }}\n            <p-sort-icon field=\"deleted_at\"></p-sort-icon>\n          </th>\n          <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template #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",
+			template: "<div class=\"row\">\n  <div\n    class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Subscriptions</h2>\n    <a class=\"btn btn-sm btn-outline-primary\"\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  @if (!isLoaded) {\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"14\" [showCaption]=\"true\" />\n  }\n  <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\" [class.d-none]=\"!isLoaded\"\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      (onStateRestore)=\"onStateRestore($event)\"\n      stateKey=\"pw-table.admin-subscriptions-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [customSort]=\"true\">\n      <ng-template #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 class=\"pw-filter-select\" inputId=\"subscriptions-list-feature-keys\"\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)=\"dt.filter($event.value, 'featureKeys', 'equals')\"\n              appendTo=\"body\">\n            </p-multiselect>\n          </div>\n          <div class=\"col-12 col-sm-4\">\n            <p-select class=\"pw-filter-select\"\n              inputId=\"subscriptions-list-status\"\n              [options]=\"subscriptionStatus\"\n              [placeholder]=\"'Filter by status'\"\n              (onChange)=\"dt.filter($event.value, 'status', 'equals')\"\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                aria-label=\"Search subscriptions...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Subscriptions.Id' | transloco }}\n            <p-sort-icon field=\"id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"organisation\">\n            {{ 'Admin.Subscriptions.Organization' | transloco }}\n            <p-sort-icon field=\"organisation\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"contact_name\">\n            {{ 'Admin.Subscriptions.ContactName' | transloco }}\n            <p-sort-icon field=\"contact_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"contact_email\">\n            {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n            <p-sort-icon field=\"contact_email\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"stripe_customer_id\">\n            {{ 'Admin.Subscriptions.Paid' | transloco }}\n            <p-sort-icon field=\"stripe_customer_id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n          <th pResizableColumn scope=\"true\"\n            class=\"expires-at-width\">\n            {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_total\">\n            {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n            <p-sort-icon field=\"sessions_total\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sort-icon field=\"sessions_last_month\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"deleted_at\">\n            {{ 'Admin.Subscriptions.Deleted' | transloco }}\n            <p-sort-icon field=\"deleted_at\"></p-sort-icon>\n          </th>\n          <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template #body\n        let-item>\n        <tr>\n          <td data-head=\"id\" [attr.data-label]=\"'Admin.Subscriptions.Id' | transloco\">{{ item.id }}</td>\n          <td data-head=\"Organization\" [attr.data-label]=\"'Admin.Subscriptions.Organization' | transloco\">\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\" [attr.data-label]=\"'Admin.Subscriptions.ContactName' | transloco\" 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\" [attr.data-label]=\"'Admin.Subscriptions.ContactEmail' | transloco\">\n            <span [pTooltip]=\"item.contact_email\" tooltipPosition=\"top\" appendTo=\"body\">{{ item.contact_email | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"Name\" [attr.data-label]=\"'Admin.Subscriptions.Product' | transloco\">\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\" [attr.data-label]=\"'Admin.Subscriptions.Currency' | transloco\">\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\" [attr.data-label]=\"'Admin.Subscriptions.PricePerMonth' | transloco\">\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\" [attr.data-label]=\"'Admin.Subscriptions.Paid' | transloco\">\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\" [attr.data-label]=\"'Admin.Subscriptions.Billing' | transloco\">\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\" [attr.data-label]=\"'Admin.Subscriptions.ExpiresAt' | transloco\">\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#\" [attr.data-label]=\"'Admin.Subscriptions.SessionsTotal' | transloco\">{{ item?.sessions_total }}</td>\n          <td data-head=\"S/m #\" [attr.data-label]=\"'Admin.Subscriptions.SessionsTotalLastMonth' | transloco\">\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\" [attr.data-label]=\"'Admin.Subscriptions.Deleted' | transloco\">\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\" [attr.data-label]=\"'Label.Actions' | transloco\">\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}.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{display:inline;vertical-align:middle;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}}.table-responsive td{padding:6px 10px!important;font-size:12px!important;line-height:1.35;vertical-align:top;overflow-wrap: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{overflow-wrap:break-word!important}\n"]
 		}]
 	}],
@@ -32144,7 +32144,7 @@ var TermsOfServiceComponent = class TermsOfServiceComponent extends AppBaseCompo
 			textParams: { entityType: "terms of service" }
 		}).then((ok) => {
 			if (!ok) return;
-			this.adminService.deleteTos(id).subscribe(() => {
+			this.adminService.deleteTos(id, this.subscriptionId).subscribe(() => {
 				this.toast.success(this.translation.translate("Admin.Tos.DeletedMessage"));
 				this.getAllTos({
 					page: this.page,
@@ -32182,7 +32182,7 @@ var TermsOfServiceComponent = class TermsOfServiceComponent extends AppBaseCompo
 			selector: "pw-terms-of-service",
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Terms of Services & Privacy Policy</h2>\n    <button *rbacAllow=\"'SubscriptionSuperAdmin || SubscriptionOwner'\" class=\"btn btn-sm btn-outline-primary\" 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  @if (!isLoaded) {\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"4\" [showCaption]=\"true\" />\n  }\n  <div class=\"primeng-datatable-container actions-collapsed mt table-responsive\" [class.d-none]=\"!isLoaded\" [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      stateKey=\"pw-table.terms-of-service\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n      <ng-template #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              aria-label=\"Search terms...\" />\n          </p-iconfield>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn pSortableColumn=\"title\" scope=\"true\" data-head=\"Title\" >{{ 'Label.Title' | transloco }} <p-sort-icon field=\"title\"></p-sort-icon></th>\n          <th pResizableColumn scope=\"true\" data-head=\"Privacy\">Privacy</th>\n          <th pResizableColumn 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 #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",
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Terms of Services & Privacy Policy</h2>\n    <button *rbacAllow=\"'SubscriptionSuperAdmin || SubscriptionOwner'\" class=\"btn btn-sm btn-outline-primary\" 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  @if (!isLoaded) {\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"4\" [showCaption]=\"true\" />\n  }\n  <div class=\"primeng-datatable-container actions-collapsed mt table-responsive\" [class.d-none]=\"!isLoaded\" [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      stateKey=\"pw-table.terms-of-service\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n      <ng-template #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              aria-label=\"Search terms...\" />\n          </p-iconfield>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn pSortableColumn=\"title\" scope=\"true\" data-head=\"Title\" >{{ 'Label.Title' | transloco }} <p-sort-icon field=\"title\"></p-sort-icon></th>\n          <th pResizableColumn scope=\"true\" data-head=\"Privacy\">Privacy</th>\n          <th pResizableColumn 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 #body let-tos>\n        <tr>\n\n          <td data-head=\"Title\" ><a pTooltip=\"{{tos.title}}\" tooltipPosition=\"top\" appendTo=\"body\" [routerLink]=\"tos.slug ? [routers.tosAndPrivacyView, tos.slug] : [routers.tosAndPrivacyView]\" target=\"_blank\">{{\n            tos.title | textTruncate : 30\n          }}</a></td>\n          <td data-head=\"Name\" data-label=\"Privacy\">{{ tos.privacy | removeHtml: 'quill' | textTruncate: 220 }}</td>\n          <td data-head=\"Terms of Services\" data-label=\"Terms\"> {{ 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]=\"tos.slug ? [routers.tosAndPrivacyView, tos.slug] : [routers.tosAndPrivacyView]\" 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: [
 				{
@@ -32476,7 +32476,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-terms-of-service",
 			standalone: false,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Terms of Services & Privacy Policy</h2>\n    <button *rbacAllow=\"'SubscriptionSuperAdmin || SubscriptionOwner'\" class=\"btn btn-sm btn-outline-primary\" 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  @if (!isLoaded) {\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"4\" [showCaption]=\"true\" />\n  }\n  <div class=\"primeng-datatable-container actions-collapsed mt table-responsive\" [class.d-none]=\"!isLoaded\" [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      stateKey=\"pw-table.terms-of-service\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n      <ng-template #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              aria-label=\"Search terms...\" />\n          </p-iconfield>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn pSortableColumn=\"title\" scope=\"true\" data-head=\"Title\" >{{ 'Label.Title' | transloco }} <p-sort-icon field=\"title\"></p-sort-icon></th>\n          <th pResizableColumn scope=\"true\" data-head=\"Privacy\">Privacy</th>\n          <th pResizableColumn 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 #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",
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Terms of Services & Privacy Policy</h2>\n    <button *rbacAllow=\"'SubscriptionSuperAdmin || SubscriptionOwner'\" class=\"btn btn-sm btn-outline-primary\" 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  @if (!isLoaded) {\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"4\" [showCaption]=\"true\" />\n  }\n  <div class=\"primeng-datatable-container actions-collapsed mt table-responsive\" [class.d-none]=\"!isLoaded\" [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      stateKey=\"pw-table.terms-of-service\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n      <ng-template #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              aria-label=\"Search terms...\" />\n          </p-iconfield>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn pSortableColumn=\"title\" scope=\"true\" data-head=\"Title\" >{{ 'Label.Title' | transloco }} <p-sort-icon field=\"title\"></p-sort-icon></th>\n          <th pResizableColumn scope=\"true\" data-head=\"Privacy\">Privacy</th>\n          <th pResizableColumn 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 #body let-tos>\n        <tr>\n\n          <td data-head=\"Title\" ><a pTooltip=\"{{tos.title}}\" tooltipPosition=\"top\" appendTo=\"body\" [routerLink]=\"tos.slug ? [routers.tosAndPrivacyView, tos.slug] : [routers.tosAndPrivacyView]\" target=\"_blank\">{{\n            tos.title | textTruncate : 30\n          }}</a></td>\n          <td data-head=\"Name\" data-label=\"Privacy\">{{ tos.privacy | removeHtml: 'quill' | textTruncate: 220 }}</td>\n          <td data-head=\"Terms of Services\" data-label=\"Terms\"> {{ 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]=\"tos.slug ? [routers.tosAndPrivacyView, tos.slug] : [routers.tosAndPrivacyView]\" 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"]
 		}]
 	}],
@@ -32542,7 +32542,7 @@ var TermsOfServiceDetailsComponent = class TermsOfServiceDetailsComponent extend
 		return this.form.controls;
 	}
 	getTosDetails() {
-		this.adminService.getTosDetails(this.id).subscribe((response) => {
+		this.adminService.getTosDetails(this.id, PermissionService.selectedSubscription?.id).subscribe((response) => {
 			this.isLoading = false;
 			this.data = response;
 			this.form.patchValue({
@@ -34402,7 +34402,7 @@ var AhoyVisitsComponent = class AhoyVisitsComponent extends AppBaseComponent {
 			selector: "pw-ahoy-visits",
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Ahoy Visits</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"11\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.d-none]=\"!isLoaded\" [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      stateKey=\"pw-table.ahoy-visits\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n      <ng-template #caption>\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2\">\n            <p-select\n              class=\"tracking-service-select pw-filter-select\"\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              [placeholder]=\"'Filter by service'\"\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 class=\"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                aria-label=\"Search visits...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"browser\">\n            {{ 'Admin.Tracking.Browser' | transloco }}\n            <p-sort-icon field=\"browser\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"device_type\">\n            {{ 'Admin.Tracking.DeviceType' | transloco }}\n            <p-sort-icon field=\"device_type\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"ip\">\n            {{ 'Admin.Tracking.Ip' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"referring_domain\">\n            {{ 'Admin.Tracking.Domain' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"landing_page\">\n            {{ 'Admin.Tracking.LandingPage' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"country\">\n            {{ 'Admin.Tracking.Country' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"region\">\n            {{ 'Admin.Tracking.Region' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"city\">\n            {{ 'Admin.Tracking.City' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"os\">\n            {{ 'Admin.Tracking.Os' | transloco }}\n            <p-sort-icon field=\"os\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\">\n            {{ 'Admin.Tracking.User' | transloco }}\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"started_at\">\n            {{ 'Admin.Tracking.StartedAt' | transloco }}\n            <p-sort-icon field=\"started_at\"></p-sort-icon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template #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",
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Ahoy Visits</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"11\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.d-none]=\"!isLoaded\" [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      stateKey=\"pw-table.ahoy-visits\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n      <ng-template #caption>\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2\">\n            <p-select\n              class=\"tracking-service-select pw-filter-select\"\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              [placeholder]=\"'Filter by service'\"\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 class=\"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                aria-label=\"Search visits...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"browser\">\n            {{ 'Admin.Tracking.Browser' | transloco }}\n            <p-sort-icon field=\"browser\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"device_type\">\n            {{ 'Admin.Tracking.DeviceType' | transloco }}\n            <p-sort-icon field=\"device_type\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"ip\">\n            {{ 'Admin.Tracking.Ip' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"referring_domain\">\n            {{ 'Admin.Tracking.Domain' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"landing_page\">\n            {{ 'Admin.Tracking.LandingPage' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"country\">\n            {{ 'Admin.Tracking.Country' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"region\">\n            {{ 'Admin.Tracking.Region' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"city\">\n            {{ 'Admin.Tracking.City' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"os\">\n            {{ 'Admin.Tracking.Os' | transloco }}\n            <p-sort-icon field=\"os\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\">\n            {{ 'Admin.Tracking.User' | transloco }}\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"started_at\">\n            {{ 'Admin.Tracking.StartedAt' | transloco }}\n            <p-sort-icon field=\"started_at\"></p-sort-icon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template #body\n        let-visits>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Browser\" [attr.data-label]=\"'Admin.Tracking.Browser' | transloco\">{{ visits.browser }}</td>\n          <td data-head=\"Device Type\" [attr.data-label]=\"'Admin.Tracking.DeviceType' | transloco\">{{ visits.device_type }}</td>\n          <td data-head=\"IP\" [attr.data-label]=\"'Admin.Tracking.Ip' | transloco\">{{ visits.ip }}</td>\n          <td data-head=\"referring_domain\" [attr.data-label]=\"'Admin.Tracking.Domain' | transloco\">\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\" [attr.data-label]=\"'Admin.Tracking.LandingPage' | transloco\">\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\" [attr.data-label]=\"'Admin.Tracking.Country' | transloco\">\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\" [attr.data-label]=\"'Admin.Tracking.Region' | transloco\">\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\" [attr.data-label]=\"'Admin.Tracking.City' | transloco\">\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\" [attr.data-label]=\"'Admin.Tracking.Os' | transloco\">{{ visits.os }}</td>\n            <td data-head=\"User\" [attr.data-label]=\"'Admin.Tracking.User' | transloco\">\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\" [attr.data-label]=\"'Admin.Tracking.StartedAt' | transloco\">{{ 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: [
 				{
@@ -34929,7 +34929,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-ahoy-visits",
 			standalone: false,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Ahoy Visits</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"11\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.d-none]=\"!isLoaded\" [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      stateKey=\"pw-table.ahoy-visits\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n      <ng-template #caption>\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2\">\n            <p-select\n              class=\"tracking-service-select pw-filter-select\"\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              [placeholder]=\"'Filter by service'\"\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 class=\"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                aria-label=\"Search visits...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"browser\">\n            {{ 'Admin.Tracking.Browser' | transloco }}\n            <p-sort-icon field=\"browser\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"device_type\">\n            {{ 'Admin.Tracking.DeviceType' | transloco }}\n            <p-sort-icon field=\"device_type\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"ip\">\n            {{ 'Admin.Tracking.Ip' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"referring_domain\">\n            {{ 'Admin.Tracking.Domain' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"landing_page\">\n            {{ 'Admin.Tracking.LandingPage' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"country\">\n            {{ 'Admin.Tracking.Country' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"region\">\n            {{ 'Admin.Tracking.Region' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"city\">\n            {{ 'Admin.Tracking.City' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"os\">\n            {{ 'Admin.Tracking.Os' | transloco }}\n            <p-sort-icon field=\"os\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\">\n            {{ 'Admin.Tracking.User' | transloco }}\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"started_at\">\n            {{ 'Admin.Tracking.StartedAt' | transloco }}\n            <p-sort-icon field=\"started_at\"></p-sort-icon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template #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",
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Ahoy Visits</h2>\n  </div>\n</div>\n@if (!isLoaded) {\n  <pw-skeleton-table [rows]=\"8\" [columns]=\"11\" [showCaption]=\"true\" />\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.d-none]=\"!isLoaded\" [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      stateKey=\"pw-table.ahoy-visits\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      >\n      <ng-template #caption>\n        <div class=\"row\">\n          <div *rbacAllow=\"'SuperAdmin'\"\n            class=\"col-sm-2\">\n            <p-select\n              class=\"tracking-service-select pw-filter-select\"\n              [options]=\"microServices\"\n              (onChange)=\"onServiceChange($event.value)\"\n              appendTo=\"body\"\n              [placeholder]=\"'Filter by service'\"\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 class=\"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                aria-label=\"Search visits...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"browser\">\n            {{ 'Admin.Tracking.Browser' | transloco }}\n            <p-sort-icon field=\"browser\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"device_type\">\n            {{ 'Admin.Tracking.DeviceType' | transloco }}\n            <p-sort-icon field=\"device_type\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"ip\">\n            {{ 'Admin.Tracking.Ip' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"referring_domain\">\n            {{ 'Admin.Tracking.Domain' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"landing_page\">\n            {{ 'Admin.Tracking.LandingPage' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"country\">\n            {{ 'Admin.Tracking.Country' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"region\">\n            {{ 'Admin.Tracking.Region' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"city\">\n            {{ 'Admin.Tracking.City' | transloco }}\n            <p-sort-icon field=\"ip\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"os\">\n            {{ 'Admin.Tracking.Os' | transloco }}\n            <p-sort-icon field=\"os\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\">\n            {{ 'Admin.Tracking.User' | transloco }}\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"started_at\">\n            {{ 'Admin.Tracking.StartedAt' | transloco }}\n            <p-sort-icon field=\"started_at\"></p-sort-icon>\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template #body\n        let-visits>\n        <tr [class.d-none]=\"loading\">\n          <td data-head=\"Browser\" [attr.data-label]=\"'Admin.Tracking.Browser' | transloco\">{{ visits.browser }}</td>\n          <td data-head=\"Device Type\" [attr.data-label]=\"'Admin.Tracking.DeviceType' | transloco\">{{ visits.device_type }}</td>\n          <td data-head=\"IP\" [attr.data-label]=\"'Admin.Tracking.Ip' | transloco\">{{ visits.ip }}</td>\n          <td data-head=\"referring_domain\" [attr.data-label]=\"'Admin.Tracking.Domain' | transloco\">\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\" [attr.data-label]=\"'Admin.Tracking.LandingPage' | transloco\">\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\" [attr.data-label]=\"'Admin.Tracking.Country' | transloco\">\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\" [attr.data-label]=\"'Admin.Tracking.Region' | transloco\">\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\" [attr.data-label]=\"'Admin.Tracking.City' | transloco\">\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\" [attr.data-label]=\"'Admin.Tracking.Os' | transloco\">{{ visits.os }}</td>\n            <td data-head=\"User\" [attr.data-label]=\"'Admin.Tracking.User' | transloco\">\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\" [attr.data-label]=\"'Admin.Tracking.StartedAt' | transloco\">{{ 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"]
 		}]
 	}],
@@ -37419,7 +37419,7 @@ var UserListComponent = class UserListComponent extends UsersListBaseComponent {
 			],
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Users</h2>\n    <a class=\"btn btn-sm btn-outline-primary\"\n      id=\"btn-create\"\n      *rbacAllow=\"'SuperAdmin'\"\n      [routerLink]=\"[routers.usersDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add User\n    </a>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 mt-0\">\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"10\" [showCaption]=\"true\"></pw-skeleton-table>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.d-none]=\"!isLoaded\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      stateKey=\"pw-table.admin-users-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [value]=\"users\"\n      [paginator]=\"totalRecords !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      (onStateRestore)=\"onTableStateRestore($event)\"\n      [customSort]=\"true\">\n      <ng-template #caption>\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-role-product\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event); dt.filter($event.value, 'filterSource', 'equals')\"\n              placeholder=\"Filter users by role, product, or feature\"\n              [selectionLimit]=\"1\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\">\n            </p-multiselect>\n          </div>\n          @if (selectedOption) {\n            <div class=\"col-4\"\n              >\n              <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-criteria\"\n                [options]=\"searchDataSource\"\n                (onChange)=\"onSearchCriteria($event); dt.filter($event.value, 'criteria', 'equals')\"\n                [showToggleAll]=\"true\"\n                [(ngModel)]=\"criteria\"\n                [showHeader]=\"true\"\n                placeholder=\"Filter by {{ selectedOption.value }}s\"\n                maxSelectedLabels=\"2\"\n                appendTo=\"body\">\n              </p-multiselect>\n            </div>\n          }\n          <div class=\"col-auto d-flex align-items-center\">\n            <span class=\"ambassadors-only-toggle\"\n              [pTooltip]=\"'Admin.Users.AmbassadorsOnly' | transloco\"\n              tooltipPosition=\"top\" appendTo=\"body\">\n              <ui-switch\n                [checked]=\"showAmbassadorsOnly\"\n                (change)=\"showAmbassadorsOnly = $event; onAmbassadorsOnlyToggle(); dt.filter($event, 'ambassadors', 'equals')\"\n                [attr.aria-label]=\"'Admin.Users.AmbassadorsOnly' | transloco\">\n              </ui-switch>\n            </span>\n          </div>\n          <div class=\"text-end\">\n            <label for=\"users-list-search\" class=\"visually-hidden\">Search User</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"users-list-search\"\n                name=\"users-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search users...\"\n                data-cy=\"user-search\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"wd-90\"\n                aria-label=\"Search users...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Users.Id' | transloco }}\n            <p-sort-icon field=\"id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"first_name\">\n            {{ 'Label.FirstName' | transloco }}\n            <p-sort-icon field=\"first_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_name\">\n            {{ 'Label.LastName' | transloco }}\n            <p-sort-icon field=\"last_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"email\">\n            {{ 'Label.Email' | transloco }}\n            <p-sort-icon field=\"email\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"slug\">\n            {{ 'Admin.Users.Slug' | transloco }}\n            <p-sort-icon field=\"slug\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"encrypted_password\">\n            {{ 'Admin.Users.EmailConfirm' | transloco }}\n            <p-sort-icon field=\"encrypted_password\"></p-sort-icon>\n          </th>\n\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sort-icon field=\"sessions_last_month\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_sign_in_at\">\n            {{ 'Admin.Users.LastLogin' | transloco }}\n            <p-sort-icon field=\"last_sign_in_at\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"signed_up_at\">\n            {{ 'Admin.Users.RegisteredOn' | transloco }}\n            <p-sort-icon field=\"signed_up_at\"></p-sort-icon>\n          </th>\n          <th scope=\"true\"\n            class=\"actions-list-four\">\n            {{ 'Label.Actions' | transloco }}\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template #body\n        let-user>\n        <tr>\n          <td data-head=\"id\"> {{ user.id }}</td>\n          <td data-head=\"First Name\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n          <td data-head=\"Last Name\">{{ user.last_name }}\n            @if (user?.alpha) {\n              <span\n                [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n              </span>\n            }\n            @if (user?.beta) {\n              <span class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n              </span>\n            }\n            @if (user?.cognito_sso_activated) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-cloud success\" ></i>\n              </span>\n            }\n            @if (user?.ambassador_count > 0) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Ambassador' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-handshake alpha-beta text-primary\" aria-hidden=\"true\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"Email\">{{ user.email }}</td>\n          <td data-head=\"Slug\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\">\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: user?.has_password\n                            }\"\n              color=\"success-danger\"\n            class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n            @if (user?.blocked) {\n              <span class=\"ms-2\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': user?.sessions_last_month < 3\n                          }\">{{ user?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Last Login\">\n            @if (user?.current_sign_in_at | isOnline) {\n              <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n            } @else if (user?.current_sign_in_at) {\n              <span>\n                {{ user.current_sign_in_at  | dateFormat }}\n              </span>\n            } @else {\n              {{ user.last_sign_in_at | dateFormat }}\n            }\n          </td>\n          <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fas fa-people-arrows fa-lg\"\n                  (click)=\"onImpersonate(user)\"\n                  (keydown.enter)=\"onImpersonate(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n              @if (user?.enable_two_factor_authenticator) {\n                <li pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\n                  (click)=\"disable2fa(user?.id)\"\n                  (keydown.enter)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              @if (currentUser && user.id !== currentUser.id) {\n                <li pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fa fa-trash delete-icon\"\n                  (keydown.enter)=\"onDelete(user)\"\n                  (keydown.space)=\"onDelete(user)\"\n                  (click)=\"onDelete(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n",
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Users</h2>\n    <a class=\"btn btn-sm btn-outline-primary\"\n      id=\"btn-create\"\n      *rbacAllow=\"'SuperAdmin'\"\n      [routerLink]=\"[routers.usersDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add User\n    </a>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 mt-0\">\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"10\" [showCaption]=\"true\"></pw-skeleton-table>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.d-none]=\"!isLoaded\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      stateKey=\"pw-table.admin-users-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [value]=\"users\"\n      [paginator]=\"totalRecords !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      (onStateRestore)=\"onTableStateRestore($event)\"\n      [customSort]=\"true\">\n      <ng-template #caption>\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-role-product\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event); dt.filter($event.value, 'filterSource', 'equals')\"\n              placeholder=\"Filter users by role, product, or feature\"\n              [selectionLimit]=\"1\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\">\n            </p-multiselect>\n          </div>\n          @if (selectedOption) {\n            <div class=\"col-4\"\n              >\n              <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-criteria\"\n                [options]=\"searchDataSource\"\n                (onChange)=\"onSearchCriteria($event); dt.filter($event.value, 'criteria', 'equals')\"\n                [showToggleAll]=\"true\"\n                [(ngModel)]=\"criteria\"\n                [showHeader]=\"true\"\n                placeholder=\"Filter by {{ selectedOption.value }}s\"\n                maxSelectedLabels=\"2\"\n                appendTo=\"body\">\n              </p-multiselect>\n            </div>\n          }\n          <div class=\"col-auto d-flex align-items-center\">\n            <span class=\"ambassadors-only-toggle\"\n              [pTooltip]=\"'Admin.Users.AmbassadorsOnly' | transloco\"\n              tooltipPosition=\"top\" appendTo=\"body\">\n              <ui-switch\n                [checked]=\"showAmbassadorsOnly\"\n                (change)=\"showAmbassadorsOnly = $event; onAmbassadorsOnlyToggle(); dt.filter($event, 'ambassadors', 'equals')\"\n                [attr.aria-label]=\"'Admin.Users.AmbassadorsOnly' | transloco\">\n              </ui-switch>\n            </span>\n          </div>\n          <div class=\"text-end\">\n            <label for=\"users-list-search\" class=\"visually-hidden\">Search User</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"users-list-search\"\n                name=\"users-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search users...\"\n                data-cy=\"user-search\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"wd-90\"\n                aria-label=\"Search users...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Users.Id' | transloco }}\n            <p-sort-icon field=\"id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"first_name\">\n            {{ 'Label.FirstName' | transloco }}\n            <p-sort-icon field=\"first_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_name\">\n            {{ 'Label.LastName' | transloco }}\n            <p-sort-icon field=\"last_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"email\">\n            {{ 'Label.Email' | transloco }}\n            <p-sort-icon field=\"email\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"slug\">\n            {{ 'Admin.Users.Slug' | transloco }}\n            <p-sort-icon field=\"slug\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"encrypted_password\">\n            {{ 'Admin.Users.EmailConfirm' | transloco }}\n            <p-sort-icon field=\"encrypted_password\"></p-sort-icon>\n          </th>\n\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sort-icon field=\"sessions_last_month\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_sign_in_at\">\n            {{ 'Admin.Users.LastLogin' | transloco }}\n            <p-sort-icon field=\"last_sign_in_at\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"signed_up_at\">\n            {{ 'Admin.Users.RegisteredOn' | transloco }}\n            <p-sort-icon field=\"signed_up_at\"></p-sort-icon>\n          </th>\n          <th scope=\"true\"\n            class=\"actions-list-four\">\n            {{ 'Label.Actions' | transloco }}\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template #body\n        let-user>\n        <tr>\n          <td data-head=\"id\" [attr.data-label]=\"'Admin.Users.Id' | transloco\"> {{ user.id }}</td>\n          <td data-head=\"First Name\" [attr.data-label]=\"'Label.FirstName' | transloco\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n          <td data-head=\"Last Name\" [attr.data-label]=\"'Label.LastName' | transloco\">{{ user.last_name }}\n            @if (user?.alpha) {\n              <span\n                [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n              </span>\n            }\n            @if (user?.beta) {\n              <span class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n              </span>\n            }\n            @if (user?.cognito_sso_activated) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-cloud success\" ></i>\n              </span>\n            }\n            @if (user?.ambassador_count > 0) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Ambassador' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-handshake alpha-beta text-primary\" aria-hidden=\"true\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"Email\" [attr.data-label]=\"'Label.Email' | transloco\">{{ user.email }}</td>\n          <td data-head=\"Slug\" [attr.data-label]=\"'Admin.Users.Slug' | transloco\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\" [attr.data-label]=\"'Admin.Users.EmailConfirm' | transloco\">\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 #\" [attr.data-label]=\"'Admin.Subscriptions.SessionsTotalLastMonth' | transloco\">\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\" [attr.data-label]=\"'Admin.Users.LastLogin' | transloco\">\n            @if (user?.current_sign_in_at | isOnline) {\n              <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n            } @else if (user?.current_sign_in_at) {\n              <span>\n                {{ user.current_sign_in_at  | dateFormat }}\n              </span>\n            } @else {\n              {{ user.last_sign_in_at | dateFormat }}\n            }\n          </td>\n          <td data-head=\"Registered On\" [attr.data-label]=\"'Admin.Users.RegisteredOn' | transloco\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\" [attr.data-label]=\"'Label.Actions' | transloco\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fas fa-people-arrows fa-lg\"\n                  (click)=\"onImpersonate(user)\"\n                  (keydown.enter)=\"onImpersonate(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n              @if (user?.enable_two_factor_authenticator) {\n                <li pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\n                  (click)=\"disable2fa(user?.id)\"\n                  (keydown.enter)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              @if (currentUser && user.id !== currentUser.id) {\n                <li pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fa fa-trash delete-icon\"\n                  (keydown.enter)=\"onDelete(user)\"\n                  (keydown.space)=\"onDelete(user)\"\n                  (click)=\"onDelete(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n",
 			styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.search-input input{width:100%}.w-150{width:150px}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.ambassadors-only-toggle{display:inline-flex;align-items:center}.ambassadors-only-toggle ::ng-deep .switch small{display:flex;align-items:center;justify-content:center}.ambassadors-only-toggle ::ng-deep .switch small:after{content:\"\\f2b5\";font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900;font-size:12px;line-height:1;color:var(--first)}\n"],
 			dependencies: [
 				{
@@ -37856,7 +37856,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-admin-user-list",
 			standalone: false,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Users</h2>\n    <a class=\"btn btn-sm btn-outline-primary\"\n      id=\"btn-create\"\n      *rbacAllow=\"'SuperAdmin'\"\n      [routerLink]=\"[routers.usersDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add User\n    </a>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 mt-0\">\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"10\" [showCaption]=\"true\"></pw-skeleton-table>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.d-none]=\"!isLoaded\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      stateKey=\"pw-table.admin-users-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [value]=\"users\"\n      [paginator]=\"totalRecords !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      (onStateRestore)=\"onTableStateRestore($event)\"\n      [customSort]=\"true\">\n      <ng-template #caption>\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-role-product\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event); dt.filter($event.value, 'filterSource', 'equals')\"\n              placeholder=\"Filter users by role, product, or feature\"\n              [selectionLimit]=\"1\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\">\n            </p-multiselect>\n          </div>\n          @if (selectedOption) {\n            <div class=\"col-4\"\n              >\n              <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-criteria\"\n                [options]=\"searchDataSource\"\n                (onChange)=\"onSearchCriteria($event); dt.filter($event.value, 'criteria', 'equals')\"\n                [showToggleAll]=\"true\"\n                [(ngModel)]=\"criteria\"\n                [showHeader]=\"true\"\n                placeholder=\"Filter by {{ selectedOption.value }}s\"\n                maxSelectedLabels=\"2\"\n                appendTo=\"body\">\n              </p-multiselect>\n            </div>\n          }\n          <div class=\"col-auto d-flex align-items-center\">\n            <span class=\"ambassadors-only-toggle\"\n              [pTooltip]=\"'Admin.Users.AmbassadorsOnly' | transloco\"\n              tooltipPosition=\"top\" appendTo=\"body\">\n              <ui-switch\n                [checked]=\"showAmbassadorsOnly\"\n                (change)=\"showAmbassadorsOnly = $event; onAmbassadorsOnlyToggle(); dt.filter($event, 'ambassadors', 'equals')\"\n                [attr.aria-label]=\"'Admin.Users.AmbassadorsOnly' | transloco\">\n              </ui-switch>\n            </span>\n          </div>\n          <div class=\"text-end\">\n            <label for=\"users-list-search\" class=\"visually-hidden\">Search User</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"users-list-search\"\n                name=\"users-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search users...\"\n                data-cy=\"user-search\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"wd-90\"\n                aria-label=\"Search users...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Users.Id' | transloco }}\n            <p-sort-icon field=\"id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"first_name\">\n            {{ 'Label.FirstName' | transloco }}\n            <p-sort-icon field=\"first_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_name\">\n            {{ 'Label.LastName' | transloco }}\n            <p-sort-icon field=\"last_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"email\">\n            {{ 'Label.Email' | transloco }}\n            <p-sort-icon field=\"email\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"slug\">\n            {{ 'Admin.Users.Slug' | transloco }}\n            <p-sort-icon field=\"slug\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"encrypted_password\">\n            {{ 'Admin.Users.EmailConfirm' | transloco }}\n            <p-sort-icon field=\"encrypted_password\"></p-sort-icon>\n          </th>\n\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sort-icon field=\"sessions_last_month\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_sign_in_at\">\n            {{ 'Admin.Users.LastLogin' | transloco }}\n            <p-sort-icon field=\"last_sign_in_at\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"signed_up_at\">\n            {{ 'Admin.Users.RegisteredOn' | transloco }}\n            <p-sort-icon field=\"signed_up_at\"></p-sort-icon>\n          </th>\n          <th scope=\"true\"\n            class=\"actions-list-four\">\n            {{ 'Label.Actions' | transloco }}\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template #body\n        let-user>\n        <tr>\n          <td data-head=\"id\"> {{ user.id }}</td>\n          <td data-head=\"First Name\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n          <td data-head=\"Last Name\">{{ user.last_name }}\n            @if (user?.alpha) {\n              <span\n                [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n              </span>\n            }\n            @if (user?.beta) {\n              <span class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n              </span>\n            }\n            @if (user?.cognito_sso_activated) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-cloud success\" ></i>\n              </span>\n            }\n            @if (user?.ambassador_count > 0) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Ambassador' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-handshake alpha-beta text-primary\" aria-hidden=\"true\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"Email\">{{ user.email }}</td>\n          <td data-head=\"Slug\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\">\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: user?.has_password\n                            }\"\n              color=\"success-danger\"\n            class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n            @if (user?.blocked) {\n              <span class=\"ms-2\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': user?.sessions_last_month < 3\n                          }\">{{ user?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Last Login\">\n            @if (user?.current_sign_in_at | isOnline) {\n              <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n            } @else if (user?.current_sign_in_at) {\n              <span>\n                {{ user.current_sign_in_at  | dateFormat }}\n              </span>\n            } @else {\n              {{ user.last_sign_in_at | dateFormat }}\n            }\n          </td>\n          <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fas fa-people-arrows fa-lg\"\n                  (click)=\"onImpersonate(user)\"\n                  (keydown.enter)=\"onImpersonate(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n              @if (user?.enable_two_factor_authenticator) {\n                <li pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\n                  (click)=\"disable2fa(user?.id)\"\n                  (keydown.enter)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              @if (currentUser && user.id !== currentUser.id) {\n                <li pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fa fa-trash delete-icon\"\n                  (keydown.enter)=\"onDelete(user)\"\n                  (keydown.space)=\"onDelete(user)\"\n                  (click)=\"onDelete(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n",
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Users</h2>\n    <a class=\"btn btn-sm btn-outline-primary\"\n      id=\"btn-create\"\n      *rbacAllow=\"'SuperAdmin'\"\n      [routerLink]=\"[routers.usersDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add User\n    </a>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 mt-0\">\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"10\" [showCaption]=\"true\"></pw-skeleton-table>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.d-none]=\"!isLoaded\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      stateKey=\"pw-table.admin-users-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [value]=\"users\"\n      [paginator]=\"totalRecords !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      (onStateRestore)=\"onTableStateRestore($event)\"\n      [customSort]=\"true\">\n      <ng-template #caption>\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-role-product\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event); dt.filter($event.value, 'filterSource', 'equals')\"\n              placeholder=\"Filter users by role, product, or feature\"\n              [selectionLimit]=\"1\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\">\n            </p-multiselect>\n          </div>\n          @if (selectedOption) {\n            <div class=\"col-4\"\n              >\n              <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-criteria\"\n                [options]=\"searchDataSource\"\n                (onChange)=\"onSearchCriteria($event); dt.filter($event.value, 'criteria', 'equals')\"\n                [showToggleAll]=\"true\"\n                [(ngModel)]=\"criteria\"\n                [showHeader]=\"true\"\n                placeholder=\"Filter by {{ selectedOption.value }}s\"\n                maxSelectedLabels=\"2\"\n                appendTo=\"body\">\n              </p-multiselect>\n            </div>\n          }\n          <div class=\"col-auto d-flex align-items-center\">\n            <span class=\"ambassadors-only-toggle\"\n              [pTooltip]=\"'Admin.Users.AmbassadorsOnly' | transloco\"\n              tooltipPosition=\"top\" appendTo=\"body\">\n              <ui-switch\n                [checked]=\"showAmbassadorsOnly\"\n                (change)=\"showAmbassadorsOnly = $event; onAmbassadorsOnlyToggle(); dt.filter($event, 'ambassadors', 'equals')\"\n                [attr.aria-label]=\"'Admin.Users.AmbassadorsOnly' | transloco\">\n              </ui-switch>\n            </span>\n          </div>\n          <div class=\"text-end\">\n            <label for=\"users-list-search\" class=\"visually-hidden\">Search User</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"users-list-search\"\n                name=\"users-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search users...\"\n                data-cy=\"user-search\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"wd-90\"\n                aria-label=\"Search users...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Users.Id' | transloco }}\n            <p-sort-icon field=\"id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"first_name\">\n            {{ 'Label.FirstName' | transloco }}\n            <p-sort-icon field=\"first_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_name\">\n            {{ 'Label.LastName' | transloco }}\n            <p-sort-icon field=\"last_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"email\">\n            {{ 'Label.Email' | transloco }}\n            <p-sort-icon field=\"email\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"slug\">\n            {{ 'Admin.Users.Slug' | transloco }}\n            <p-sort-icon field=\"slug\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"encrypted_password\">\n            {{ 'Admin.Users.EmailConfirm' | transloco }}\n            <p-sort-icon field=\"encrypted_password\"></p-sort-icon>\n          </th>\n\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sort-icon field=\"sessions_last_month\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_sign_in_at\">\n            {{ 'Admin.Users.LastLogin' | transloco }}\n            <p-sort-icon field=\"last_sign_in_at\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"signed_up_at\">\n            {{ 'Admin.Users.RegisteredOn' | transloco }}\n            <p-sort-icon field=\"signed_up_at\"></p-sort-icon>\n          </th>\n          <th scope=\"true\"\n            class=\"actions-list-four\">\n            {{ 'Label.Actions' | transloco }}\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template #body\n        let-user>\n        <tr>\n          <td data-head=\"id\" [attr.data-label]=\"'Admin.Users.Id' | transloco\"> {{ user.id }}</td>\n          <td data-head=\"First Name\" [attr.data-label]=\"'Label.FirstName' | transloco\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n          <td data-head=\"Last Name\" [attr.data-label]=\"'Label.LastName' | transloco\">{{ user.last_name }}\n            @if (user?.alpha) {\n              <span\n                [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n              </span>\n            }\n            @if (user?.beta) {\n              <span class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n              </span>\n            }\n            @if (user?.cognito_sso_activated) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-cloud success\" ></i>\n              </span>\n            }\n            @if (user?.ambassador_count > 0) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Ambassador' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-handshake alpha-beta text-primary\" aria-hidden=\"true\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"Email\" [attr.data-label]=\"'Label.Email' | transloco\">{{ user.email }}</td>\n          <td data-head=\"Slug\" [attr.data-label]=\"'Admin.Users.Slug' | transloco\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\" [attr.data-label]=\"'Admin.Users.EmailConfirm' | transloco\">\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 #\" [attr.data-label]=\"'Admin.Subscriptions.SessionsTotalLastMonth' | transloco\">\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\" [attr.data-label]=\"'Admin.Users.LastLogin' | transloco\">\n            @if (user?.current_sign_in_at | isOnline) {\n              <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n            } @else if (user?.current_sign_in_at) {\n              <span>\n                {{ user.current_sign_in_at  | dateFormat }}\n              </span>\n            } @else {\n              {{ user.last_sign_in_at | dateFormat }}\n            }\n          </td>\n          <td data-head=\"Registered On\" [attr.data-label]=\"'Admin.Users.RegisteredOn' | transloco\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\" [attr.data-label]=\"'Label.Actions' | transloco\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fas fa-people-arrows fa-lg\"\n                  (click)=\"onImpersonate(user)\"\n                  (keydown.enter)=\"onImpersonate(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n              @if (user?.enable_two_factor_authenticator) {\n                <li pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\n                  (click)=\"disable2fa(user?.id)\"\n                  (keydown.enter)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              @if (currentUser && user.id !== currentUser.id) {\n                <li pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fa fa-trash delete-icon\"\n                  (keydown.enter)=\"onDelete(user)\"\n                  (keydown.space)=\"onDelete(user)\"\n                  (click)=\"onDelete(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n",
 			styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.search-input input{width:100%}.w-150{width:150px}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.ambassadors-only-toggle{display:inline-flex;align-items:center}.ambassadors-only-toggle ::ng-deep .switch small{display:flex;align-items:center;justify-content:center}.ambassadors-only-toggle ::ng-deep .switch small:after{content:\"\\f2b5\";font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900;font-size:12px;line-height:1;color:var(--first)}\n"]
 		}]
 	}],