@posiwise/admin-module 0.0.160 → 0.0.162

package/fesm2022/posiwise-admin-module.mjs

@@ -58,11 +58,13 @@ import { PageAccessGuard } from '@posiwise/core-guards';
 import { AppBaseComponent } from '@posiwise/app-base-component';
 import * as i5 from 'primeng/progressspinner';
 import * as i12 from '@jsverse/transloco';
-import { PAGE_SIZE, TOKEN_KEY, TAG_ENTITY, PERMISSION_NAMES, TOKEN_HEADER_KEY, SUBSCRIPTION_ANALYTICS_TYPES } from '@posiwise/common-utilities';
+import { PAGE_SIZE, TOKEN_KEY, TAG_ENTITY, PERMISSION_NAMES, ADMIN_ROUTERS, TOKEN_HEADER_KEY, SUBSCRIPTION_ANALYTICS_TYPES } from '@posiwise/common-utilities';
 import { HelperService } from '@posiwise/helper-service';
 import * as i3$3 from 'primeng/api';
 import swal from 'sweetalert2';
 import { __decorate, __metadata } from 'tslib';
+import * as i14 from '@angular/cdk/drag-drop';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
 import groupBy from 'lodash/groupBy';
 import { forkJoin, map, Subject, takeUntil, of } from 'rxjs';
 import { groupBy as groupBy$1 } from 'lodash';
@@ -745,6 +747,20 @@ class DomainConfigBuildComponent extends AppBaseComponent {
     get integrationsItems() {
         return this.integrations.get('items');
     }
+    get abTests() {
+        return this.form.get('ab_tests');
+    }
+    addAbTest() {
+        this.abTests.push(this.fb.group({
+            description: [''],
+            experiment_name: [''],
+            db_shard: [''],
+            microservice_name: ['']
+        }));
+    }
+    removeAbTest(index) {
+        this.abTests.removeAt(index);
+    }
     addIntegrationItem() {
         this.integrationsItems.push(this.fb.group({
             title: [''],
@@ -980,17 +996,17 @@ class DomainConfigBuildComponent extends AppBaseComponent {
         forkJoin({
             options: this.adminService.getAvailableDomainOptions(this.subscriptionId),
             getProduct: this.productService.getProductList({}, this.subscriptionId),
-            config: this.adminService.getDomainConfigById(this.duplicateConfigId || this.id, this.subscriptionId)
+            config: this.adminService.getDomainConfigById(HelperService.effectiveConfigId(this.duplicateConfigId, this.id), this.subscriptionId)
         })
             .subscribe(res => {
             // options
             this.masterSubscriptionProductList = [
                 { id: null, name: 'Select Master Product' },
-                ...(res?.options?.master_subscription?.products || [])
+                ...(res?.options?.master_subscription?.products ?? [])
             ];
             this.masterSubscriptionsList = [
                 { label: 'Select Master Subscription', value: null },
-                ...(res?.options?.master_subscription?.subscriptions || []).map(sub => ({
+                ...(res?.options?.master_subscription?.subscriptions ?? []).map(sub => ({
                     label: sub.organisation
                         ? `${sub.organisation} - ${sub.contact_name}`
                         : sub.contact_name,
@@ -999,19 +1015,19 @@ class DomainConfigBuildComponent extends AppBaseComponent {
             ];
             this.subscriptionTosList = [
                 { id: null, title: 'Select Main TOS' },
-                ...(res?.options?.master_subscription?.subscription_tos || [])
+                ...(res?.options?.master_subscription?.subscription_tos ?? [])
             ];
             this.crmSubscriptionsList = [
                 { id: null, organisation: null, contact_name: 'Select CRM Subscription' },
-                ...(res?.options?.master_crm?.subscriptions || [])
+                ...(res?.options?.master_crm?.subscriptions ?? [])
             ];
             this.crmSourcesList = [
                 { id: null, name: 'Select CRM Source' },
-                ...(res?.options?.master_crm?.sources || [])
+                ...(res?.options?.master_crm?.sources ?? [])
             ];
             this.crmProductList = [
                 { id: null, name: 'Select CRM Product', subscription_id: null },
-                ...(res?.options?.master_crm?.products || [])
+                ...(res?.options?.master_crm?.products ?? [])
             ];
             // end options
             this.productsList = this.groupProducts(res?.getProduct?.products);
@@ -1021,160 +1037,206 @@ class DomainConfigBuildComponent extends AppBaseComponent {
             const demoGroup = this.form.get('book_demo');
             const itemsArray = demoGroup.get('items');
             demoGroup.patchValue({
-                title: demo?.title || '',
-                description: demo?.description || ''
+                title: demo?.title ?? '',
+                description: demo?.description ?? ''
             });
             const uspsGroup = this.form.get('usps');
             const uspItemsArray = uspsGroup.get('items');
             uspsGroup.patchValue({
-                title: res.config?.usps?.title || '',
-                description: res.config?.usps?.description || ''
+                title: res.config?.usps?.title ?? '',
+                description: res.config?.usps?.description ?? ''
             });
             uspItemsArray.clear();
-            (res.config?.usps?.items || []).forEach(item => {
+            (res.config?.usps?.items ?? []).forEach(item => {
                 uspItemsArray.push(this.fb.group({
-                    description: [item.description || '']
+                    description: [item.description ?? '']
                 }));
             });
             const headerGroup = this.form.get('header');
             const subHeadingsArray = headerGroup.get('sub_headings');
             headerGroup.patchValue({
-                headline: res.config?.header?.headline || '',
-                description: res.config?.header?.description || '',
-                video_url: res.config?.header?.video_url || '',
-                bg_image_url: res.config?.header?.bg_image_url || ''
+                headline: res.config?.header?.headline ?? '',
+                description: res.config?.header?.description ?? '',
+                video_url: res.config?.header?.video_url ?? '',
+                bg_image_url: res.config?.header?.bg_image_url ?? ''
             });
             subHeadingsArray.clear();
-            (res.config?.header?.sub_headings || []).forEach(sh => {
+            (res.config?.header?.sub_headings ?? []).forEach(sh => {
                 subHeadingsArray.push(this.fb.group({
-                    description: [sh.description || '']
+                    description: [sh.description ?? '']
                 }));
             });
             const testimonialsGroup = this.form.get('testimonials');
             const testimonialItems = testimonialsGroup.get('items');
             testimonialsGroup.patchValue({
-                title: res.config?.testimonials?.title || '',
-                description: res.config?.testimonials?.description || ''
+                title: res.config?.testimonials?.title ?? '',
+                description: res.config?.testimonials?.description ?? ''
             });
             testimonialItems.clear();
-            (res.config?.testimonials?.items || []).forEach(item => {
+            (res.config?.testimonials?.items ?? []).forEach(item => {
                 testimonialItems.push(this.fb.group({
-                    testimonial: [item?.testimonial || ''],
-                    name: [item?.name || ''],
-                    blog_url: [item?.blog_url || ''],
-                    image_url: [item?.image_url || ''],
-                    video_url: [item?.video_url || '']
+                    testimonial: [item?.testimonial ?? ''],
+                    name: [item?.name ?? ''],
+                    blog_url: [item?.blog_url ?? ''],
+                    image_url: [item?.image_url ?? ''],
+                    video_url: [item?.video_url ?? '']
                 }));
             });
             const ctasGroup = this.form.get('ctas');
             const ctasItems = ctasGroup.get('items');
             ctasGroup.patchValue({
-                title: res.config?.ctas?.title || '',
-                description: res.config?.ctas?.description || '',
-                image_url: res.config?.ctas?.image_url || ''
+                title: res.config?.ctas?.title ?? '',
+                description: res.config?.ctas?.description ?? '',
+                image_url: res.config?.ctas?.image_url ?? ''
             });
             ctasItems.clear();
-            (res.config?.ctas?.items || []).forEach(item => {
+            (res.config?.ctas?.items ?? []).forEach(item => {
                 ctasItems.push(this.fb.group({
-                    title: [item?.title || ''],
-                    description: [item?.description || ''],
-                    button_text: [item?.button_text || ''],
-                    image_url: [item?.image_url || ''],
-                    cta_url: [item?.cta_url || ''],
-                    video_url: [item?.video_url || '']
+                    title: [item?.title ?? ''],
+                    description: [item?.description ?? ''],
+                    button_text: [item?.button_text ?? ''],
+                    image_url: [item?.image_url ?? ''],
+                    cta_url: [item?.cta_url ?? ''],
+                    video_url: [item?.video_url ?? '']
                 }));
             });
             const guidesGroup = this.form.get('guides');
             const guidesItems = guidesGroup.get('items');
             guidesItems.clear();
-            (res.config?.guides?.items || []).forEach(item => {
+            (res.config?.guides?.items ?? []).forEach(item => {
                 guidesItems.push(this.fb.group({
-                    title: [item?.title || ''],
-                    description: [item?.description || ''],
-                    button_text: [item?.button_text || ''],
-                    image_url: [item?.image_url || ''],
-                    guide_url: [item?.guide_url || '']
+                    title: [item?.title ?? ''],
+                    description: [item?.description ?? ''],
+                    button_text: [item?.button_text ?? ''],
+                    image_url: [item?.image_url ?? ''],
+                    guide_url: [item?.guide_url ?? '']
                 }));
             });
             const partnersGroup = this.form.get('partners');
             const partnersItems = partnersGroup.get('items');
             partnersGroup.patchValue({
-                description: this.data?.partners?.description || ''
+                description: this.data?.partners?.description ?? ''
             });
             partnersItems.clear();
-            (this.data?.partners?.items || []).forEach(item => {
+            (this.data?.partners?.items ?? []).forEach(item => {
                 partnersItems.push(this.fb.group({
-                    image_url: [item?.image_url || ''],
-                    name: [item?.name || ''],
-                    description: [item?.description || ''],
-                    blog_url: [item?.blog_url || ''],
-                    video_url: [item?.video_url || '']
+                    image_url: [item?.image_url ?? ''],
+                    name: [item?.name ?? ''],
+                    description: [item?.description ?? ''],
+                    blog_url: [item?.blog_url ?? ''],
+                    video_url: [item?.video_url ?? '']
                 }));
             });
             itemsArray.clear();
-            (demo?.items || []).forEach(link => {
+            (demo?.items ?? []).forEach(link => {
                 itemsArray.push(this.fb.group({
-                    title: [link.title || ''],
-                    url: [link.url || '']
+                    title: [link.title ?? ''],
+                    url: [link.url ?? '']
                 }));
             });
             const contactUsGroup = this.form.get('contact_us');
             const questionsArray = contactUsGroup.get('questions');
             const hubspotArray = contactUsGroup.get('hubspot');
             contactUsGroup.patchValue({
-                description: res.config?.contact_us?.description || ''
+                description: res.config?.contact_us?.description ?? ''
             });
             questionsArray.clear();
             hubspotArray.clear();
-            (res.config?.contact_us?.questions || []).forEach(q => {
+            (res.config?.contact_us?.questions ?? []).forEach(q => {
                 questionsArray.push(this.fb.group({
-                    question: [q?.question || ''],
-                    options: this.fb.array((q?.options || []).map(o => this.fb.group({
-                        option: [o?.option || '']
+                    question: [q?.question ?? ''],
+                    options: this.fb.array((q?.options ?? []).map(o => this.fb.group({
+                        option: [o?.option ?? '']
                     })))
                 }));
             });
-            (res.config?.contact_us?.hubspot || []).forEach(h => {
+            (res.config?.contact_us?.hubspot ?? []).forEach(h => {
                 hubspotArray.push(this.fb.group({
-                    id: [h?.id || ''],
-                    position: [h?.position || ''],
-                    div: [h?.div || '']
+                    id: [h?.id ?? ''],
+                    position: [h?.position ?? ''],
+                    div: [h?.div ?? '']
                 }));
             });
             const videosGroup = this.form.get('videos');
             const videosItems = videosGroup.get('items');
             videosGroup.patchValue({
-                title: res.config?.videos?.title || '',
-                description: res.config?.videos?.description || ''
+                title: res.config?.videos?.title ?? '',
+                description: res.config?.videos?.description ?? ''
             });
             videosItems.clear();
-            (res.config?.videos?.items || []).forEach(item => {
+            (res.config?.videos?.items ?? []).forEach(item => {
                 videosItems.push(this.fb.group({
-                    title: [item?.title || ''],
-                    description: [item?.description || ''],
-                    blog_url: [item?.blog_url || ''],
-                    image_url: [item?.image_url || ''],
-                    video_url: [item?.video_url || '']
+                    title: [item?.title ?? ''],
+                    description: [item?.description ?? ''],
+                    blog_url: [item?.blog_url ?? ''],
+                    image_url: [item?.image_url ?? ''],
+                    video_url: [item?.video_url ?? '']
                 }));
             });
             const integrationsGroup = this.form.get('integrations');
             const integrationsItems = integrationsGroup.get('items');
             integrationsGroup.patchValue({
-                title: res.config?.integrations?.title || '',
-                description: res.config?.integrations?.description || ''
+                title: res.config?.integrations?.title ?? '',
+                description: res.config?.integrations?.description ?? ''
             });
             integrationsItems.clear();
-            (res.config?.integrations?.items || []).forEach(item => {
+            (res.config?.integrations?.items ?? []).forEach(item => {
                 integrationsItems.push(this.fb.group({
-                    title: [item?.title || ''],
-                    description: [item?.description || ''],
-                    blog_url: [item?.blog_url || ''],
-                    image_url: [item?.image_url || ''],
-                    video_url: [item?.video_url || '']
+                    title: [item?.title ?? ''],
+                    description: [item?.description ?? ''],
+                    blog_url: [item?.blog_url ?? ''],
+                    image_url: [item?.image_url ?? ''],
+                    video_url: [item?.video_url ?? '']
                 }));
             });
             this.shardUrl = res?.config?.shard_url;
-            this.form.patchValue(this.data);
+            const fixedData = { ...this.data };
+            if (!fixedData.header || typeof fixedData.header !== 'object' || !Array.isArray(fixedData.header.sub_headings)) {
+                fixedData.header = { ...fixedData.header, sub_headings: [] };
+            }
+            if (!fixedData.testimonials || typeof fixedData.testimonials !== 'object' || !Array.isArray(fixedData.testimonials.items)) {
+                fixedData.testimonials = { ...fixedData.testimonials, items: [] };
+            }
+            if (!fixedData.book_demo || typeof fixedData.book_demo !== 'object' || !Array.isArray(fixedData.book_demo.items)) {
+                fixedData.book_demo = { ...fixedData.book_demo, items: [] };
+            }
+            if (!fixedData.partners || typeof fixedData.partners !== 'object' || !Array.isArray(fixedData.partners.items)) {
+                fixedData.partners = { ...fixedData.partners, items: [] };
+            }
+            if (!fixedData.videos || typeof fixedData.videos !== 'object' || !Array.isArray(fixedData.videos.items)) {
+                fixedData.videos = { ...fixedData.videos, items: [] };
+            }
+            if (!fixedData.integrations || typeof fixedData.integrations !== 'object' || !Array.isArray(fixedData.integrations.items)) {
+                fixedData.integrations = { ...fixedData.integrations, items: [] };
+            }
+            if (!fixedData.usps || typeof fixedData.usps !== 'object' || !Array.isArray(fixedData.usps.items)) {
+                fixedData.usps = { ...fixedData.usps, items: [] };
+            }
+            if (!fixedData.ctas || typeof fixedData.ctas !== 'object' || !Array.isArray(fixedData.ctas.items)) {
+                fixedData.ctas = { ...fixedData.ctas, items: [] };
+            }
+            if (!fixedData.ab_tests || !Array.isArray(fixedData.ab_tests)) {
+                fixedData.ab_tests = [];
+            }
+            if (!fixedData.guides || typeof fixedData.guides !== 'object' || !Array.isArray(fixedData.guides.items)) {
+                fixedData.guides = { ...fixedData.guides, items: [] };
+            }
+            if (!fixedData.navbar || typeof fixedData.navbar !== 'object' || !Array.isArray(fixedData.navbar.items)) {
+                fixedData.navbar = { ...fixedData.navbar, items: [] };
+            }
+            if (!fixedData.footer_links || typeof fixedData.footer_links !== 'object' || !Array.isArray(fixedData.footer_links.items)) {
+                fixedData.footer_links = { ...fixedData.footer_links, items: [] };
+            }
+            if (!fixedData.contact_us || typeof fixedData.contact_us !== 'object') {
+                fixedData.contact_us = { ...fixedData.contact_us };
+            }
+            if (!fixedData.contact_us.questions || !Array.isArray(fixedData.contact_us.questions)) {
+                fixedData.contact_us.questions = [];
+            }
+            if (!fixedData.contact_us.hubspot || !Array.isArray(fixedData.contact_us.hubspot)) {
+                fixedData.contact_us.hubspot = [];
+            }
+            this.form.patchValue(fixedData);
             this.form.patchValue({
                 cs_product_id: this.productsList.find(x => x.id === this.data?.cs_product_id),
                 trial_product_id: this.productsList.find(x => x.id === this.data?.trial_product_id)
@@ -1182,26 +1244,26 @@ class DomainConfigBuildComponent extends AppBaseComponent {
             const navbarGroup = this.form.get('navbar');
             const navbarItems = navbarGroup.get('items');
             navbarItems.clear();
-            (res.config?.navbar?.items || []).forEach(nav => {
+            (res.config?.navbar?.items ?? []).forEach(nav => {
                 navbarItems.push(this.fb.group({
-                    title: [nav.title || ''],
-                    path: [nav.path || ''],
-                    subtitles: this.fb.array((nav.subtitles || []).map(sub => this.fb.group({
-                        title: [sub.title || ''],
-                        path: [sub.path || '']
+                    title: [nav.title ?? ''],
+                    path: [nav.path ?? ''],
+                    subtitles: this.fb.array((nav.subtitles ?? []).map(sub => this.fb.group({
+                        title: [sub.title ?? ''],
+                        path: [sub.path ?? '']
                     })))
                 }));
             });
             const footerLinksGroup = this.form.get('footer_links');
             const footerLinksItems = footerLinksGroup.get('items');
             footerLinksItems.clear();
-            (res.config?.footer_links?.items || []).forEach(link => {
+            (res.config?.footer_links?.items ?? []).forEach(link => {
                 footerLinksItems.push(this.fb.group({
-                    title: [link?.title || ''],
-                    path: [link?.path || ''],
-                    subtitles: this.fb.array((link?.subtitles || []).map(sub => this.fb.group({
-                        title: [sub?.title || ''],
-                        path: [sub?.path || '']
+                    title: [link?.title ?? ''],
+                    path: [link?.path ?? ''],
+                    subtitles: this.fb.array((link?.subtitles ?? []).map(sub => this.fb.group({
+                        title: [sub?.title ?? ''],
+                        path: [sub?.path ?? '']
                     })))
                 }));
             });
@@ -1215,6 +1277,16 @@ class DomainConfigBuildComponent extends AppBaseComponent {
                     trial_cta_iframe: JSON.parse(res?.config?.trial_cta_iframe)
                 });
             }
+            const abTestsArray = this.abTests;
+            abTestsArray.clear();
+            (res.config?.ab_tests ?? []).forEach(test => {
+                abTestsArray.push(this.fb.group({
+                    description: [test?.description ?? ''],
+                    experiment_name: [test?.experiment_name ?? ''],
+                    db_shard: [test?.db_shard ?? ''],
+                    microservice_name: [test?.microservice_name ?? '']
+                }));
+            });
         })
             .add(() => {
             this.isLoading = false;
@@ -1238,7 +1310,7 @@ class DomainConfigBuildComponent extends AppBaseComponent {
     }
     searchProduct(event) {
         this.productService
-            .getProductList({ search: event?.query || '' }, this.subscriptionId)
+            .getProductList({ search: event?.query ?? '' }, this.subscriptionId)
             .subscribe(response => {
             this.productsList = this.groupProducts(response.products);
         });
@@ -1297,6 +1369,30 @@ class DomainConfigBuildComponent extends AppBaseComponent {
             item.onClose();
         });
     }
+    dropFooterSubtitles(i, event) {
+        const control = this.getFooterSubtitles(i);
+        moveItemInArray(control.controls, event.previousIndex, event.currentIndex);
+        control.updateValueAndValidity();
+    }
+    dropNavbarSubtitles(i, event) {
+        const subtitles = this.getNavbarSubtitles(i);
+        moveItemInArray(subtitles.controls, event.previousIndex, event.currentIndex);
+        subtitles.updateValueAndValidity();
+    }
+    dropBookDemoLinks(event) {
+        const items = this.form.get('book_demo')?.get('items');
+        moveItemInArray(items.controls, event.previousIndex, event.currentIndex);
+        items.updateValueAndValidity();
+    }
+    dropContactUsOptions(questionIndex, event) {
+        const options = this.getQuestionOptions(questionIndex);
+        moveItemInArray(options.controls, event.previousIndex, event.currentIndex);
+        options.updateValueAndValidity();
+    }
+    dropItems(control, event) {
+        moveItemInArray(control.controls, event.previousIndex, event.currentIndex);
+        control.updateValueAndValidity();
+    }
     onSave() {
         this.submitted = true;
         this.buttonBusy = true;
@@ -1305,17 +1401,16 @@ class DomainConfigBuildComponent extends AppBaseComponent {
             subscription_id: this.subscriptionId,
             ...this.form.value
         };
-        data.cs_product_id = this.form.get('cs_product_id').value?.id || null;
-        data.trial_product_id = this.form.get('trial_product_id').value?.id || null;
-        data['cs_cta_iframe'] = this.form.value?.cs_cta_iframe || '';
-        data['trial_cta_iframe'] = this.form.value?.trial_cta_iframe || '';
+        data.cs_product_id = this.form.get('cs_product_id').value?.id ?? null;
+        data.trial_product_id = this.form.get('trial_product_id').value?.id ?? null;
+        data['cs_cta_iframe'] = this.form.value?.cs_cta_iframe ?? '';
+        data['trial_cta_iframe'] = this.form.value?.trial_cta_iframe ?? '';
         const sub$ = this.id
             ? this.adminService.updateDomainConfig(this.id, data)
             : this.adminService.createDomainConfig(data);
         sub$.subscribe({
             next: () => {
                 this.toast.success(this.translation.translate('Admin.DomainConfig.UpdatedMessage'));
-                this.router.navigate([this.routers.domainConfig]);
             }
         }).add(() => {
             this.submitted = false;
@@ -1323,7 +1418,7 @@ class DomainConfigBuildComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DomainConfigBuildComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }, { token: i1$2.ProductService }, { token: i1$1.NgbModal }, { token: i3$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: DomainConfigBuildComponent, selector: "pw-domain-config-build", viewQueries: [{ propertyName: "partnerCropper", first: true, predicate: ["partnerCropper"], descendants: true }, { propertyName: "uploader", predicate: CustomUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n  <p> The following parameters and settings will be applied to all public pages of this domain. </p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"!isLoading && data?.host_name\">\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.MasterSubscription' | transloco\"\n          name=\"master_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n          <p-dropdown\n          [options]=\"masterSubscriptionsList\"\n          formControlName=\"master_subscription_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n          placeholder=\"Select Master Subscription\">\n        </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"\n                        'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n                    \"\n          name=\"master_subscription_product_id\">\n          <p-dropdown\n            [options]=\"masterSubscriptionProductList\"\n            formControlName=\"master_subscription_product_id\"\n            [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n            [placeholder]=\"'Select Master Product'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n          name=\"blog_feature_key\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"blog_feature_key\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n          name=\"main_tos_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n          <p-dropdown\n          [options]=\"subscriptionTosList\"\n          formControlName=\"main_tos_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n          [placeholder]=\"'Select Main TOS'\"\n          optionValue=\"id\">\n          <ng-template pTemplate=\"selectedItem\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n          <ng-template pTemplate=\"item\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n        </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <!-- crm subscription fields -->\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n          name=\"crm_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n          <p-dropdown\n            [options]=\"crmSubscriptionsList\"\n            formControlName=\"crm_subscription_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n            [placeholder]=\"'Select CRM Subscription'\"\n            optionValue=\"id\">\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n          </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n          name=\"crm_product_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n          <p-dropdown\n            [options]=\"crmProductList\"\n            formControlName=\"crm_product_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n            [placeholder]=\"'Select CRM Product'\"\n            optionValue=\"id\"\n            >\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n          name=\"crm_source_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n          <p-dropdown\n            [options]=\"crmSourcesList\"\n            formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n            [placeholder]=\"'Select CRM Source'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <!-- crm subscription fields end-->\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"active\" name=\"active\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n          name=\"is_product_domain\">\n          <ui-switch size=\"small\"\n            uncheckedLabel=\"false\"\n            checkedLabel=\"true\"\n            formControlName=\"is_product_domain\"\n            name=\"is_product_domain\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n          name=\"can_register_through_main_page\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"can_register_through_main_page\"\n            name=\"can_register_through_main_page\" [ngClass]=\"{\n                                  'is-invalid': submitted && f['can_register_through_main_page'].errors\n                              }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"social_login_enabled\"\n            name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"notify_logins\"\n            name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n    </div>\n\n    <div class=\"my-5\">\n      <h3>Pre-Built Landing Pages for User Onboarding</h3>\n\n      <p-accordion class=\"mt-5\">\n        <p-accordionTab [header]=\"'Instructions - README FIRST'\">\n          <div class=\"mb-3\">\n            <p>We\u2019ve built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n              UIs for onboarding users.</p>\n            <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n              <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n              Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n            <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n              <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n              appear in the <strong>Admin > Users section</strong>.</p>\n            <p>Once you\u2019ve selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n              the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n              <strong>/join/trial3</strong>.</p>\n            <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n              out.</p>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Subscribe to Product/Newsletter Config'\">\n          <div class=\"mb-3\">\n            <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n              /join/trial2, etc.</p>\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <!-- live page link -->\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                  form.get('trial_product_id').touched &&\n                                                  form.get('trial_product_id').invalid\n                                                      ? { border: '1px solid #ff586b' }\n                                                      : { border: '1px solid gray' }\n                                              \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n                                          \">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_book_demo_url'].errors\n                                              }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_cta_iframe'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_join_message'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_pdf_download_text'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"trial_image\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n                [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image2\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_pdf_image\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg2\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Header Section'\">\n          <div class=\"row mt-4\" formGroupName=\"header\">\n            <h4 class=\"mb-4\">Header Section</h4>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container label=\"Header Headline\" name=\"headline\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"headline\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Video URL\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"bg_image_url\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container label=\"Header Description\">\n                <textarea class=\"form-control\" rows=\"5\" formControlName=\"description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\">\n                                                </textarea>\n              </pw-input-container>\n            </div>\n            <div formArrayName=\"sub_headings\" class=\"col-12\">\n              <div *ngFor=\"let sub of f['header'].get('sub_headings')['controls']; let i = index\" [formGroupName]=\"i\"\n                class=\"row mb-3\">\n                <div class=\"col-md-10\" *ngIf=\"f['header'].get('sub_headings')['controls'].length\">\n                  <pw-input-container label=\"Sub Header Description\">\n                    <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\">\n                                                    </textarea>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i class=\"fa fa-trash delete-icon\" (click)=\"removeHeaderSubHeading(i)\"\n                    (keydown.enter)=\"removeHeaderSubHeading(i)\" (keydown.space)=\"removeHeaderSubHeading(i)\" ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"></i>\n                </div>\n              </div>\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\"> + Add Sub Heading\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Resources Section'\">\n          <div class=\"row row mt-4 mb-4\">\n            <h4 class=\"mb-3\">Resources Section</h4>\n            <div class=\"col-12 col-sm-6\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"resources_tagline\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"resource_image\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Unique Selling Proposition Section (USP) '\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n            <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Video Url\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container label=\"USPs Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"\n                 >\n                                  </textarea>\n              </pw-input-container>\n            </div>\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div\n                *ngFor=\"let item of f['usps'].get('items')['controls']; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3\"\n              >\n                <div class=\"col-sm-10\">\n                  <pw-input-container label=\"Item Description\">\n                    <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"\n                  >\n                                  </textarea>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-sm-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeUspItem(i)\"\n                    (keydown.enter)=\"removeUspItem(i)\"\n                    (keydown.space)=\"removeUspItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n                + Add USP Item\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Partners (Clients) Section'\">\n\n          <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n            <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n            <!-- Title -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Partner Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Description -->\n            <div class=\"col-12\">\n              <pw-input-container label=\"Partners Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- Partner Items -->\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of partnersItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n                <!-- Name -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Name\" class=\"col-12 col-md-6\" name=\"name\">\n                    <input class=\"form-control\" formControlName=\"name\"/>\n                  </pw-input-container>\n                </div>\n\n                <!-- Blog URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Blog Url\" class=\"col-12 col-md-6\" name=\"blog_url\">\n                    <input class=\"form-control\" formControlName=\"blog_url\"/>\n                  </pw-input-container>\n                </div>\n\n                <!-- Video URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Video Url\" class=\"col-12 col-md-6\" name=\"video_url\">\n                    <input class=\"form-control\" formControlName=\"video_url\"/>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Image Url\" class=\"col-12 col-md-6\" name=\"ctas_title\">\n                    <input class=\"form-control\" formControlName=\"image_url\"/>\n                  </pw-input-container>\n                </div>\n\n                <!-- Remove Button -->\n                <div class=\"col-md-6 text-start mt-2 align-self-center\">\n                  <i ngbTooltip=\"Remove\" (click)=\"removePartnerItem(i)\" class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n                </div>\n              </div>\n\n              <!-- Add New Partner -->\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Testimonials Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n            <h4 class=\"mb-4\">Testimonials Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Items List -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let item of testimonialsItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n\n                <pw-input-container label=\"Name\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"name\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Testimonial\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                      ngbTooltip=\"Remove\" (click)=\"removeTestimonialItem(i)\"\n                      (keydown.enter)=\"removeTestimonialItem(i)\"\n                      (keydown.space)=\"removeTestimonialItem(i)\" class=\"fa fa-trash delete-icon\"\n                      aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">+ Add Testimonial</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Video Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n            <h4 class=\"mb-3\">Video Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Video Items -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let item of videosItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeVideoItem(i)\"\n                    (keydown.enter)=\"removeVideoItem(i)\"\n                    (keydown.space)=\"removeVideoItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">+ Add Video</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Call to Actions Section (CTAs)'\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n            <h4 class=\"mb-4\">CTAs Section</h4>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Description\" name=\"description\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n             </pw-input-container>\n            </div>\n\n            <div class=\"col-12\">\n              <pw-input-container label=\"Image URL\" name=\"image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- CTA Items -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let item of ctasItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3 ng-untouched ng-pristine ng-valid ng-star-inserted\">\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Image URL\" name=\"image_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Cta URL\" name=\"cta_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"cta_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Video URL\" name=\"video_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Title\">\n                    <input class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Description\">\n                    <input class=\"form-control\" formControlName=\"description\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Button Text\">\n                    <input class=\"form-control\" formControlName=\"button_text\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-1 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeCtasItem(i)\"\n                    (keydown.enter)=\"removeCtasItem(i)\"\n                    (keydown.space)=\"removeCtasItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Integrations Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n            <h4 class=\"mb-3\">Integrations Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\">\n              <textarea class=\"form-control\" formControlName=\"description\" rows=\"3\"></textarea>\n            </pw-input-container>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div\n                *ngFor=\"let item of integrationsItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 rounded bg-light\"\n              >\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-danger\"\n                    (click)=\"removeIntegrationItem(i)\"\n                  >\n                    Remove\n                  </button>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">\n                  + Add Integration\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Contact Us Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n            <h4 class=\"mb-3\">Contact Us Section</h4>\n            <pw-input-container label=\"Url\" class=\"col-md-6\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n            </pw-input-container>\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n            <div formArrayName=\"questions\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let questionGroup of contactUsQuestions.controls; let i = index\" [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3\">\n                <pw-input-container label=\"Question\" class=\"col-md-10\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"question\" />\n                </pw-input-container>\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i class=\"fa fa-trash delete-icon\" (click)=\"removeContactUsQuestion(i)\"\n                    (keydown.enter)=\"removeContactUsQuestion(i)\" (keydown.space)=\"removeContactUsQuestion(i)\"\n                    ngbTooltip=\"Remove\" aria-hidden=\"true\"></i>\n                </div>\n                <!-- Options inside each question -->\n                <div class=\"col-12\" formArrayName=\"options\">\n                  <div class=\"row align-items-center mb-2 border p-3\"\n                    *ngFor=\"let option of getQuestionOptions(i).controls; let j = index\" [formGroupName]=\"j\">\n                    <pw-input-container label=\"Option\" class=\"col-md-10\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"option\" />\n                    </pw-input-container>\n                    <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                      <i class=\"fa fa-trash delete-icon\" (click)=\"removeContactUsOption(i, j)\"\n                        (keydown.enter)=\"removeContactUsOption(i, j)\" (keydown.space)=\"removeContactUsOption(i, j)\"\n                        ngbTooltip=\"Remove Option\" aria-hidden=\"true\"></i>\n                    </div>\n                  </div>\n                  <div class=\"text-start\">\n                    <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\"> + Add Option </button>\n                  </div>\n                </div>\n                <!-- End options -->\n              </div>\n              <div class=\"text-start mt-3\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">+ Add Question</button>\n              </div>\n            </div>\n            <div formArrayName=\"hubspot\" class=\"col-12 mt-4\">\n              <h5 class=\"mb-4\">Hubspot Embeds</h5>\n              <div *ngFor=\"let hub of contactUsHubspotItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-2\">\n                <pw-input-container label=\"ID\" class=\"col-md-4\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"id\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Position\" class=\"col-md-4\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"position\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Div\" class=\"col-10\">\n                  <textarea class=\"form-control\" rows=\"5\" formControlName=\"div\"\n                   [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\">\n                                                 </textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeHubspotItem(i)\"\n                    (keydown.enter)=\"removeHubspotItem(i)\"\n                    (keydown.space)=\"removeHubspotItem(i)\"\n                    ngbTooltip=\"Remove Hubspot Embed\"\n                    aria-hidden=\"true\">\n                  </i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">+ Add Hubspot Embed</button>\n              </div>\n            </div>\n\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Book a Demo Section'\">\n          <div class=\"row mt-4\">\n            <div class=\"col-12\">\n              <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n              <div formGroupName=\"book_demo\">\n                <pw-input-container label=\"Title\">\n                  <input type=\"text\" formControlName=\"title\" class=\"form-control\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\">\n                  <input type=\"text\" formControlName=\"description\" class=\"form-control\" />\n                </pw-input-container>\n\n                <div formArrayName=\"items\">\n                  <div *ngFor=\"let link of f['book_demo'].get('items')['controls']; let i = index\" [formGroupName]=\"i\" class=\"row mb-3\">\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link URL\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-sm-2 d-flex align-items-center mt-3\">\n                      <i\n                      ngbTooltip=\"Remove\"\n                      (click)=\"removeBookDemoLink(i)\"\n                                          (keydown.enter)=\"removeBookDemoLink(i)\"\n                                          (keydown.space)=\"removeBookDemoLink(i)\"\n                                          class=\"fa fa-trash delete-icon\"\n                                          aria-hidden=\"true\"\n                                      ></i>\n                    </div>\n                  </div>\n                  <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">+ Add Book Demo Link</button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Navbar Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n            <h4 class=\"mb-3\">Navbar Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of navbarItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row mb-3\">\n\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Path\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                </pw-input-container>\n\n                <div class=\"col-12\" formArrayName=\"subtitles\">\n                  <div *ngFor=\"let sub of getNavbarSubtitles(i).controls; let j = index\" [formGroupName]=\"j\" class=\"row border p-3 mb-2\">\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                      <i class=\"fa fa-trash delete-icon\"\n                        (click)=\"removeSubtitle(i, j)\"\n                        (keydown.enter)=\"removeSubtitle(i, j)\"\n                        (keydown.space)=\"removeSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\">\n                      </i>\n                    </div>\n                  </div>\n                  <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n                    + Add Subtitle\n                  </button>\n                </div>\n\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeNavbarItem(i)\"\n                    (keydown.enter)=\"removeNavbarItem(i)\"\n                    (keydown.space)=\"removeNavbarItem(i)\"\n                    ngbTooltip=\"Remove Navbar Item\"\n                    aria-hidden=\"true\">\n                  </i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">+ Add Navbar Item</button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Footer Links Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n            <h4 class=\"mb-3\">Footer Links Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of footerLinksItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row mb-3\">\n\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Path\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                </pw-input-container>\n\n                <div class=\"col-12\" formArrayName=\"subtitles\">\n                  <div *ngFor=\"let sub of getFooterSubtitles(i).controls; let j = index\" [formGroupName]=\"j\" class=\"row border p-3 mb-2\">\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                      <i class=\"fa fa-trash delete-icon\"\n                        (click)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.space)=\"removeFooterSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\">\n                      </i>\n                    </div>\n                  </div>\n                  <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addFooterSubtitle(i)\">\n                    + Add Subtitle\n                  </button>\n                </div>\n\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeFooterLinkItem(i)\"\n                    (keydown.enter)=\"removeFooterLinkItem(i)\"\n                    (keydown.space)=\"removeFooterLinkItem(i)\"\n                    ngbTooltip=\"Remove Footer Item\"\n                    aria-hidden=\"true\">\n                  </i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addFooterLinkItem()\">+ Add Footer Link</button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n        <p-accordionTab [header]=\"'Guides Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n            <h4 class=\"mb-3\">Guides Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of guidesItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Button Text\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"button_text\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Guide URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"guide_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"5\" formControlName=\"description\"\n                   [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\">\n                                                 </textarea>\n                 </pw-input-container>\n\n                <div class=\"col-md-1 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeGuideItem(i)\"\n                    (keydown.enter)=\"removeGuideItem(i)\"\n                    (keydown.space)=\"removeGuideItem(i)\"\n                    ngbTooltip=\"Remove Guide\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">+ Add Guide</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n\n        <p-accordionTab [header]=\"'Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)'\">\n          <div class=\"mb-3\">\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <!-- live page link -->\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                form.get('cs_product_id').touched &&\n                                                form.get('cs_product_id').invalid\n                                                    ? { border: '1px solid #ff586b' }\n                                                    : { border: '1px solid gray' }\n                                            \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                            'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n                                        \">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['cs_pdf_download_text'].errors\n                                            }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"cs_image\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image2\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n                [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_pdf_image\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n                [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n                [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg2\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n                [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n      </p-accordion>\n    </div>\n\n    <div class=\"col-12 text-end mt-3\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"back()\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n        class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n\n\n<ng-template #partnerCropper let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Partner Image</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n    <pw-image-cropper\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n      (closeEvent)=\"onClosePartnerModal()\"\n    ></pw-image-cropper>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7$1.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i7$1.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "component", type: i4$3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i3.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.CustomUploaderComponent, selector: "pw-custom-uploader", inputs: ["controlName", "previewData", "aspectRatio", "title"], outputs: ["saveEvent"] }, { kind: "component", type: i9.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: DomainConfigBuildComponent, selector: "pw-domain-config-build", viewQueries: [{ propertyName: "partnerCropper", first: true, predicate: ["partnerCropper"], descendants: true }, { propertyName: "uploader", predicate: CustomUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n  <p> The following parameters and settings will be applied to all public pages of this domain. </p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"!isLoading && data?.host_name\">\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.MasterSubscription' | transloco\"\n          name=\"master_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n          <p-dropdown\n          [options]=\"masterSubscriptionsList\"\n          formControlName=\"master_subscription_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n          placeholder=\"Select Master Subscription\">\n        </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"\n                        'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n                    \"\n          name=\"master_subscription_product_id\">\n          <p-dropdown\n            [options]=\"masterSubscriptionProductList\"\n            formControlName=\"master_subscription_product_id\"\n            [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n            [placeholder]=\"'Select Master Product'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n          name=\"blog_feature_key\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"blog_feature_key\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n          name=\"main_tos_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n          <p-dropdown\n          [options]=\"subscriptionTosList\"\n          formControlName=\"main_tos_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n          [placeholder]=\"'Select Main TOS'\"\n          optionValue=\"id\">\n          <ng-template pTemplate=\"selectedItem\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n          <ng-template pTemplate=\"item\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n        </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n          name=\"crm_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n          <p-dropdown\n            [options]=\"crmSubscriptionsList\"\n            formControlName=\"crm_subscription_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n            [placeholder]=\"'Select CRM Subscription'\"\n            optionValue=\"id\">\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n          </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n          name=\"crm_product_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n          <p-dropdown\n            [options]=\"crmProductList\"\n            formControlName=\"crm_product_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n            [placeholder]=\"'Select CRM Product'\"\n            optionValue=\"id\"\n            >\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n          name=\"crm_source_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n          <p-dropdown\n            [options]=\"crmSourcesList\"\n            formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n            [placeholder]=\"'Select CRM Source'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <!-- crm subscription fields end-->\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"active\" name=\"active\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n          name=\"is_product_domain\">\n          <ui-switch size=\"small\"\n            uncheckedLabel=\"false\"\n            checkedLabel=\"true\"\n            formControlName=\"is_product_domain\"\n            name=\"is_product_domain\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n          name=\"can_register_through_main_page\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"can_register_through_main_page\"\n            name=\"can_register_through_main_page\" [ngClass]=\"{\n                                  'is-invalid': submitted && f['can_register_through_main_page'].errors\n                              }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"social_login_enabled\"\n            name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"notify_logins\"\n            name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n    </div>\n\n    <div class=\"my-5\">\n      <h3>Pre-Built Pages Config (Resources, Landing Pages, etc)</h3>\n\n      <p-accordion class=\"mt-5\">\n        <p-accordionTab [header]=\"'Instructions - README FIRST'\">\n          <div class=\"mb-3\">\n            <p>We\u2019ve built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n              UIs for onboarding users.</p>\n            <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n              <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n              Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n            <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n              <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n              appear in the <strong>Admin > Users section</strong>.</p>\n            <p>Once you\u2019ve selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n              the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n              <strong>/join/trial3</strong>.</p>\n            <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n              out.</p>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Subscribe to Product/Newsletter Config'\">\n          <div class=\"mb-3\">\n            <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n              /join/trial2, etc.</p>\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <!-- live page link -->\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                  form.get('trial_product_id').touched &&\n                                                  form.get('trial_product_id').invalid\n                                                      ? { border: '1px solid #ff586b' }\n                                                      : { border: '1px solid gray' }\n                                              \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n                                          \">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_book_demo_url'].errors\n                                              }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_cta_iframe'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_join_message'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_pdf_download_text'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"trial_image\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n                [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image2\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_pdf_image\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg2\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Header Section'\">\n          <div class=\"row mt-4\" formGroupName=\"header\">\n            <h4 class=\"mb-4\">Header Section</h4>\n\n            <!-- Headline -->\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container label=\"Header Headline\" name=\"headline\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"headline\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Video URL -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Video URL\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Background Image URL -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"bg_image_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Description -->\n            <div class=\"col-12\">\n              <pw-input-container label=\"Header Description\">\n                <textarea\n                  class=\"form-control\"\n                  rows=\"5\"\n                  formControlName=\"description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n                ></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- Sub Headings -->\n            <div formArrayName=\"sub_headings\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(headerSubHeadings, $event)\">\n              <div\n                *ngFor=\"let sub of f['header'].get('sub_headings')['controls']; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3 align-items-center\"\n                cdkDrag\n              >\n                <div class=\"col-md-10\">\n                  <pw-input-container label=\"Sub Header Description\">\n                    <textarea\n                      class=\"form-control\"\n                      rows=\"3\"\n                      formControlName=\"description\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n                    ></textarea>\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeHeaderSubHeading(i)\"\n                    (keydown.enter)=\"removeHeaderSubHeading(i)\"\n                    (keydown.space)=\"removeHeaderSubHeading(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\">\n                + Add Sub Heading\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Resources Section'\">\n          <div class=\"row row mt-4 mb-4\">\n            <h4 class=\"mb-3\">Resources Section</h4>\n            <div class=\"col-12 col-sm-6\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"resources_tagline\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"resource_image\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Unique Selling Proposition Section (USP) '\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n            <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Video Url\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12\">\n              <pw-input-container label=\"USPs Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- USP Items -->\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(uspsItems, $event)\">\n              <div\n                *ngFor=\"let item of f['usps'].get('items')['controls']; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3 align-items-center\"\n                cdkDrag\n              >\n                <div class=\"col-sm-10\">\n                  <pw-input-container label=\"Item Description\">\n                    <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeUspItem(i)\"\n                    (keydown.enter)=\"removeUspItem(i)\"\n                    (keydown.space)=\"removeUspItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n                + Add USP Item\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Partners (Clients) Section'\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n            <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n\n            <!-- Title -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Partner Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Description -->\n            <div class=\"col-12\">\n              <pw-input-container label=\"Partners Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- Partner Items with Drag Support -->\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(partnersItems, $event)\">\n              <div\n                *ngFor=\"let item of partnersItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <!-- Name -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Name\" class=\"col-12\" name=\"name\">\n                    <input class=\"form-control\" formControlName=\"name\" />\n                  </pw-input-container>\n                </div>\n\n                <!-- Blog URL + Drag Handle -->\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Blog Url\" name=\"blog_url\">\n                      <input class=\"form-control\" formControlName=\"blog_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n\n                <!-- Video URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Video Url\" name=\"video_url\">\n                    <input class=\"form-control\" formControlName=\"video_url\" />\n                  </pw-input-container>\n                </div>\n\n                <!-- Image URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Image Url\" name=\"image_url\">\n                    <input class=\"form-control\" formControlName=\"image_url\" />\n                  </pw-input-container>\n                </div>\n\n                <!-- Delete Icon -->\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i\n                    ngbTooltip=\"Remove\"\n                    (click)=\"removePartnerItem(i)\"\n                    (keydown.enter)=\"removePartnerItem(i)\"\n                    (keydown.space)=\"removePartnerItem(i)\"\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <!-- Add New Partner -->\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Testimonials Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n            <h4 class=\"mb-4\">Testimonials Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Items List -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(testimonialsItems, $event)\">\n              <div\n                *ngFor=\"let item of testimonialsItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Name\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Blog URL\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Testimonial\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    ngbTooltip=\"Remove\"\n                    (click)=\"removeTestimonialItem(i)\"\n                    (keydown.enter)=\"removeTestimonialItem(i)\"\n                    (keydown.space)=\"removeTestimonialItem(i)\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">\n                  + Add Testimonial\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Video Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n            <h4 class=\"mb-3\">Video Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Video Items -->\n            <div\n              formArrayName=\"items\"\n              class=\"col-12 mt-3\"\n              cdkDropList\n              (cdkDropListDropped)=\"dropItems(videosItems, $event)\"\n            >\n              <div\n                *ngFor=\"let item of videosItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Title\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Blog URL\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeVideoItem(i)\"\n                    (keydown.enter)=\"removeVideoItem(i)\"\n                    (keydown.space)=\"removeVideoItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">\n                  + Add Video\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Call to Actions Section (CTAs)'\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n            <h4 class=\"mb-4\">CTAs Section</h4>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Description\" name=\"description\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12\">\n              <pw-input-container label=\"Image URL\" name=\"image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- CTA Items -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(ctasItems, $event)\">\n              <div\n                *ngFor=\"let item of ctasItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Image URL\" name=\"image_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Cta URL\" name=\"cta_url\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"cta_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Video URL\" name=\"video_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Title\">\n                    <input class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Description\">\n                    <input class=\"form-control\" formControlName=\"description\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-5\">\n                  <pw-input-container label=\"Button Text\">\n                    <input class=\"form-control\" formControlName=\"button_text\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-1 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeCtasItem(i)\"\n                    (keydown.enter)=\"removeCtasItem(i)\"\n                    (keydown.space)=\"removeCtasItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Integrations Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n            <h4 class=\"mb-3\">Integrations Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\">\n              <textarea class=\"form-control\" formControlName=\"description\" rows=\"3\"></textarea>\n            </pw-input-container>\n\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(integrationsItems, $event)\">\n              <div\n                *ngFor=\"let item of integrationsItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 rounded bg-light\"\n                cdkDrag\n              >\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Description\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n                  <i\n                    class=\"fa fa-trash delete-icon align-self-center\"\n                    (click)=\"removeIntegrationItem(i)\"\n                    (keydown.enter)=\"removeIntegrationItem(i)\"\n                    (keydown.space)=\"removeIntegrationItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Contact Us Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n            <h4 class=\"mb-3\">Contact Us Section</h4>\n\n            <pw-input-container label=\"Url\" class=\"col-md-6\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n            </pw-input-container>\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <div formArrayName=\"questions\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsQuestions, $event)\">\n              <div\n                *ngFor=\"let questionGroup of contactUsQuestions.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3\"\n                cdkDrag\n              >\n                <pw-input-container label=\"Question\" class=\"col-md-10\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"question\" />\n                </pw-input-container>\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeContactUsQuestion(i)\"\n                    (keydown.enter)=\"removeContactUsQuestion(i)\"\n                    (keydown.space)=\"removeContactUsQuestion(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-12 mt-3\" formArrayName=\"options\" cdkDropList [cdkDropListData]=\"getQuestionOptions(i).controls\" (cdkDropListDropped)=\"dropContactUsOptions(i, $event)\">\n                  <div\n                    class=\"row align-items-center mb-2 border p-3\"\n                    *ngFor=\"let option of getQuestionOptions(i).controls; let j = index\"\n                    [formGroupName]=\"j\"\n                    cdkDrag\n                  >\n                    <pw-input-container label=\"Option\" class=\"col-md-10\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"option\" />\n                    </pw-input-container>\n\n                    <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeContactUsOption(i, j)\"\n                        (keydown.enter)=\"removeContactUsOption(i, j)\"\n                        (keydown.space)=\"removeContactUsOption(i, j)\"\n                        ngbTooltip=\"Remove Option\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n\n                    <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder option\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <div class=\"text-start\">\n                    <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\">\n                      + Add Option\n                    </button>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-3\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">\n                  + Add Question\n                </button>\n              </div>\n            </div>\n\n            <div formArrayName=\"hubspot\" class=\"col-12 mt-4\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsHubspotItems, $event)\">\n              <h5 class=\"mb-4\">Hubspot Embeds</h5>\n\n              <div\n                *ngFor=\"let hub of contactUsHubspotItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-2\"\n                cdkDrag\n              >\n              <pw-input-container label=\"ID\" class=\"col-md-5\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"id\" />\n              </pw-input-container>\n\n              <pw-input-container label=\"Position\" class=\"col-md-6\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"position\" />\n              </pw-input-container>\n              <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-3\">\n                <i\n                  class=\"fa fa-bars cursor-move\"\n                  cdkDragHandle\n                  ngbTooltip=\"Drag to reorder\"\n                  aria-hidden=\"true\"\n                ></i>\n              </div>\n\n                <pw-input-container label=\"Div\" class=\"col-10\">\n                  <textarea\n                    class=\"form-control\"\n                    rows=\"5\"\n                    formControlName=\"div\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\"\n                  ></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeHubspotItem(i)\"\n                    (keydown.enter)=\"removeHubspotItem(i)\"\n                    (keydown.space)=\"removeHubspotItem(i)\"\n                    ngbTooltip=\"Remove Hubspot Embed\"\n                    aria-hidden=\"true\">\n</i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">\n                  + Add Hubspot Embed\n                </button>\n              </div>\n            </div>\n\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Book a Demo Section'\">\n          <div class=\"row mt-4\">\n            <div class=\"col-12\">\n              <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n              <div formGroupName=\"book_demo\">\n                <pw-input-container label=\"Title\">\n                  <input type=\"text\" formControlName=\"title\" class=\"form-control\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\">\n                  <input type=\"text\" formControlName=\"description\" class=\"form-control\" />\n                </pw-input-container>\n\n                <div formArrayName=\"items\" cdkDropList (cdkDropListDropped)=\"dropBookDemoLinks($event)\">\n                  <div\n                    *ngFor=\"let link of f['book_demo'].get('items')['controls']; let i = index\"\n                    [formGroupName]=\"i\"\n                    class=\"row mb-3 border p-3 align-items-center\"\n                    cdkDrag\n                  >\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link URL\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                      <i\n                        ngbTooltip=\"Remove\"\n                        (click)=\"removeBookDemoLink(i)\"\n                        (keydown.enter)=\"removeBookDemoLink(i)\"\n                        (keydown.space)=\"removeBookDemoLink(i)\"\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n\n                    <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">\n                    + Add Book Demo Link\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Navbar Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n            <h4 class=\"mb-3\">Navbar Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(navbarItems, $event)\">\n              <div\n                *ngFor=\"let item of navbarItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3\"\n                cdkDrag\n              >\n                <div class=\"row align-items-center\">\n                  <pw-input-container label=\"Title\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n\n                  <pw-input-container label=\"Path\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                  </pw-input-container>\n\n                  <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n                    <i\n                      class=\"fa fa-trash delete-icon text-danger\"\n                      (click)=\"removeNavbarItem(i)\"\n                      (keydown.enter)=\"removeNavbarItem(i)\"\n                      (keydown.space)=\"removeNavbarItem(i)\"\n                      ngbTooltip=\"Remove Navbar Item\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n\n                  <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n                    <i\n                      class=\"fa fa-bars cursor-move\"\n                      cdkDragHandle\n                      ngbTooltip=\"Drag to reorder\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n                </div>\n\n                <div\n                  class=\"col-12 mt-3\"\n                  formArrayName=\"subtitles\"\n                  cdkDropList\n                  [cdkDropListData]=\"getNavbarSubtitles(i).controls\"\n                  (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\"\n                >\n                  <div\n                    *ngFor=\"let sub of getNavbarSubtitles(i).controls; let j = index\"\n                    [formGroupName]=\"j\"\n                    class=\"row border p-3 mb-2 align-items-center\"\n                    cdkDrag\n                  >\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeSubtitle(i, j)\"\n                        (keydown.enter)=\"removeSubtitle(i, j)\"\n                        (keydown.space)=\"removeSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n\n                    <div class=\"col-md-1 d-flex justify-content-end\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n                    + Add Subtitle\n                  </button>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">\n                + Add Navbar Item\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Footer Links Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n            <h4 class=\"mb-3\">Footer Links Section</h4>\n\n            <div\n              formArrayName=\"items\"\n              class=\"col-12\"\n              cdkDropList\n              (cdkDropListDropped)=\"dropItems(footerLinksItems, $event)\"\n            >\n              <div\n                *ngFor=\"let item of footerLinksItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3\"\n                cdkDrag\n              >\n                <div class=\"row align-items-center\">\n\n                  <pw-input-container label=\"Title\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n\n                  <pw-input-container label=\"Path\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                  </pw-input-container>\n                  <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n                    <i\n                      class=\"fa fa-trash delete-icon text-danger\"\n                      (click)=\"removeFooterLinkItem(i)\"\n                      (keydown.enter)=\"removeFooterLinkItem(i)\"\n                      (keydown.space)=\"removeFooterLinkItem(i)\"\n                      ngbTooltip=\"Remove Footer Item\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n                  <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n                    <i\n                      class=\"fa fa-bars cursor-move\"\n                      cdkDragHandle\n                      ngbTooltip=\"Drag to reorder\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n\n                </div>\n\n                <div\n                  class=\"col-12 mt-3\"\n                  formArrayName=\"subtitles\"\n                  cdkDropList\n                  [cdkDropListData]=\"getFooterSubtitles(i).controls\"\n                  (cdkDropListDropped)=\"dropFooterSubtitles(i, $event)\"\n                >\n                  <div\n                    *ngFor=\"let sub of getFooterSubtitles(i).controls; let j = index\"\n                    [formGroupName]=\"j\"\n                    class=\"row border p-3 mb-2 align-items-center\"\n                    cdkDrag\n                  >\n\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n\n\n\n\n                    <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.space)=\"removeFooterSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                    <div class=\"col-md-1 d-flex justify-content-end\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-sm btn-primary mt-2\"\n                    (click)=\"addFooterSubtitle(i)\"\n                  >\n                    + Add Subtitle\n                  </button>\n                </div>\n              </div>\n\n              <button\n                type=\"button\"\n                class=\"btn btn-primary mt-2 mb-2\"\n                (click)=\"addFooterLinkItem()\"\n              >\n                + Add Footer Link\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n\n\n        <p-accordionTab [header]=\"'Guides Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n            <h4 class=\"mb-3\">Guides Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div cdkDropList (cdkDropListDropped)=\"dropItems(guidesItems, $event)\">\n                <div\n                  *ngFor=\"let item of guidesItems.controls; let i = index\"\n                  [formGroupName]=\"i\"\n                  class=\"border p-3 mb-3\"\n                  cdkDrag\n                >\n                  <div class=\"row align-items-start\">\n\n                    <pw-input-container label=\"Title\" class=\"col-md-5\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                    </pw-input-container>\n\n                    <pw-input-container label=\"Button Text\" class=\"col-md-6\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"button_text\" />\n                    </pw-input-container>\n                    <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <div class=\"row mt-2\">\n                    <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                    </pw-input-container>\n\n                    <pw-input-container label=\"Guide URL\" class=\"col-md-6\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"guide_url\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"row mt-2\">\n                    <pw-input-container label=\"Description\" class=\"col-md-11\">\n                      <textarea\n                        class=\"form-control\"\n                        rows=\"5\"\n                        formControlName=\"description\"\n                        [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n                      ></textarea>\n                    </pw-input-container>\n\n                    <div class=\"col-md-1 d-flex align-items-start justify-content-center mt-3\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeGuideItem(i)\"\n                        (keydown.enter)=\"removeGuideItem(i)\"\n                        (keydown.space)=\"removeGuideItem(i)\"\n                        ngbTooltip=\"Remove Guide\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">\n                  + Add Guide\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n        <p-accordionTab [header]=\"'AB Tests Section'\">\n          <div class=\"row mt-3 mb-4\">\n            <h4 class=\"mb-3\">AB Tests</h4>\n            <div formArrayName=\"ab_tests\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(abTests, $event)\">\n              <div\n                *ngFor=\"let abTest of abTests.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3 border p-3\"\n                cdkDrag\n              >\n                <pw-input-container label=\"Description\" class=\"col-md-5\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Experiment Name\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"experiment_name\" />\n                </pw-input-container>\n\n\n                <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <pw-input-container label=\"DB Shard\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"db_shard\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Microservice Name\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"microservice_name\" />\n                </pw-input-container>\n\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeAbTest(i)\"\n                    (keydown.enter)=\"removeAbTest(i)\"\n                    (keydown.space)=\"removeAbTest(i)\"\n                    ngbTooltip=\"Remove AB Test\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addAbTest()\">+ Add AB Test</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n\n\n        <p-accordionTab [header]=\"'Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)'\">\n          <div class=\"mb-3\">\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                form.get('cs_product_id').touched &&\n                                                form.get('cs_product_id').invalid\n                                                    ? { border: '1px solid #ff586b' }\n                                                    : { border: '1px solid gray' }\n                                            \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                            'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n                                        \">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['cs_pdf_download_text'].errors\n                                            }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"cs_image\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image2\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n                [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_pdf_image\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n                [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n                [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg2\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n                [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n      </p-accordion>\n    </div>\n\n    <div class=\"col-12 text-end mt-3\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"back()\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n        class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n\n\n<ng-template #partnerCropper let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Partner Image</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n    <pw-image-cropper\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n      (closeEvent)=\"onClosePartnerModal()\"\n    ></pw-image-cropper>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7$1.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i7$1.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "component", type: i4$3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i3.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.CustomUploaderComponent, selector: "pw-custom-uploader", inputs: ["controlName", "previewData", "aspectRatio", "title"], outputs: ["saveEvent"] }, { kind: "component", type: i9.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i14.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i14.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i14.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -1333,7 +1428,7 @@ __decorate([
 ], DomainConfigBuildComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DomainConfigBuildComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-domain-config-build', template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n  <p> The following parameters and settings will be applied to all public pages of this domain. </p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"!isLoading && data?.host_name\">\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.MasterSubscription' | transloco\"\n          name=\"master_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n          <p-dropdown\n          [options]=\"masterSubscriptionsList\"\n          formControlName=\"master_subscription_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n          placeholder=\"Select Master Subscription\">\n        </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"\n                        'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n                    \"\n          name=\"master_subscription_product_id\">\n          <p-dropdown\n            [options]=\"masterSubscriptionProductList\"\n            formControlName=\"master_subscription_product_id\"\n            [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n            [placeholder]=\"'Select Master Product'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n          name=\"blog_feature_key\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"blog_feature_key\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n          name=\"main_tos_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n          <p-dropdown\n          [options]=\"subscriptionTosList\"\n          formControlName=\"main_tos_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n          [placeholder]=\"'Select Main TOS'\"\n          optionValue=\"id\">\n          <ng-template pTemplate=\"selectedItem\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n          <ng-template pTemplate=\"item\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n        </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <!-- crm subscription fields -->\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n          name=\"crm_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n          <p-dropdown\n            [options]=\"crmSubscriptionsList\"\n            formControlName=\"crm_subscription_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n            [placeholder]=\"'Select CRM Subscription'\"\n            optionValue=\"id\">\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n          </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n          name=\"crm_product_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n          <p-dropdown\n            [options]=\"crmProductList\"\n            formControlName=\"crm_product_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n            [placeholder]=\"'Select CRM Product'\"\n            optionValue=\"id\"\n            >\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n          name=\"crm_source_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n          <p-dropdown\n            [options]=\"crmSourcesList\"\n            formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n            [placeholder]=\"'Select CRM Source'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <!-- crm subscription fields end-->\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"active\" name=\"active\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n          name=\"is_product_domain\">\n          <ui-switch size=\"small\"\n            uncheckedLabel=\"false\"\n            checkedLabel=\"true\"\n            formControlName=\"is_product_domain\"\n            name=\"is_product_domain\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n          name=\"can_register_through_main_page\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"can_register_through_main_page\"\n            name=\"can_register_through_main_page\" [ngClass]=\"{\n                                  'is-invalid': submitted && f['can_register_through_main_page'].errors\n                              }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"social_login_enabled\"\n            name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"notify_logins\"\n            name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n    </div>\n\n    <div class=\"my-5\">\n      <h3>Pre-Built Landing Pages for User Onboarding</h3>\n\n      <p-accordion class=\"mt-5\">\n        <p-accordionTab [header]=\"'Instructions - README FIRST'\">\n          <div class=\"mb-3\">\n            <p>We\u2019ve built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n              UIs for onboarding users.</p>\n            <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n              <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n              Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n            <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n              <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n              appear in the <strong>Admin > Users section</strong>.</p>\n            <p>Once you\u2019ve selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n              the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n              <strong>/join/trial3</strong>.</p>\n            <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n              out.</p>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Subscribe to Product/Newsletter Config'\">\n          <div class=\"mb-3\">\n            <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n              /join/trial2, etc.</p>\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <!-- live page link -->\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                  form.get('trial_product_id').touched &&\n                                                  form.get('trial_product_id').invalid\n                                                      ? { border: '1px solid #ff586b' }\n                                                      : { border: '1px solid gray' }\n                                              \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n                                          \">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_book_demo_url'].errors\n                                              }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_cta_iframe'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_join_message'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_pdf_download_text'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"trial_image\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n                [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image2\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_pdf_image\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg2\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Header Section'\">\n          <div class=\"row mt-4\" formGroupName=\"header\">\n            <h4 class=\"mb-4\">Header Section</h4>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container label=\"Header Headline\" name=\"headline\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"headline\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Video URL\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"bg_image_url\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container label=\"Header Description\">\n                <textarea class=\"form-control\" rows=\"5\" formControlName=\"description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\">\n                                                </textarea>\n              </pw-input-container>\n            </div>\n            <div formArrayName=\"sub_headings\" class=\"col-12\">\n              <div *ngFor=\"let sub of f['header'].get('sub_headings')['controls']; let i = index\" [formGroupName]=\"i\"\n                class=\"row mb-3\">\n                <div class=\"col-md-10\" *ngIf=\"f['header'].get('sub_headings')['controls'].length\">\n                  <pw-input-container label=\"Sub Header Description\">\n                    <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\">\n                                                    </textarea>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i class=\"fa fa-trash delete-icon\" (click)=\"removeHeaderSubHeading(i)\"\n                    (keydown.enter)=\"removeHeaderSubHeading(i)\" (keydown.space)=\"removeHeaderSubHeading(i)\" ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"></i>\n                </div>\n              </div>\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\"> + Add Sub Heading\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Resources Section'\">\n          <div class=\"row row mt-4 mb-4\">\n            <h4 class=\"mb-3\">Resources Section</h4>\n            <div class=\"col-12 col-sm-6\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"resources_tagline\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"resource_image\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Unique Selling Proposition Section (USP) '\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n            <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Video Url\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container label=\"USPs Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"\n                 >\n                                  </textarea>\n              </pw-input-container>\n            </div>\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div\n                *ngFor=\"let item of f['usps'].get('items')['controls']; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3\"\n              >\n                <div class=\"col-sm-10\">\n                  <pw-input-container label=\"Item Description\">\n                    <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"\n                  >\n                                  </textarea>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-sm-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeUspItem(i)\"\n                    (keydown.enter)=\"removeUspItem(i)\"\n                    (keydown.space)=\"removeUspItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n                + Add USP Item\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Partners (Clients) Section'\">\n\n          <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n            <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n            <!-- Title -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Partner Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Description -->\n            <div class=\"col-12\">\n              <pw-input-container label=\"Partners Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- Partner Items -->\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of partnersItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n                <!-- Name -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Name\" class=\"col-12 col-md-6\" name=\"name\">\n                    <input class=\"form-control\" formControlName=\"name\"/>\n                  </pw-input-container>\n                </div>\n\n                <!-- Blog URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Blog Url\" class=\"col-12 col-md-6\" name=\"blog_url\">\n                    <input class=\"form-control\" formControlName=\"blog_url\"/>\n                  </pw-input-container>\n                </div>\n\n                <!-- Video URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Video Url\" class=\"col-12 col-md-6\" name=\"video_url\">\n                    <input class=\"form-control\" formControlName=\"video_url\"/>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Image Url\" class=\"col-12 col-md-6\" name=\"ctas_title\">\n                    <input class=\"form-control\" formControlName=\"image_url\"/>\n                  </pw-input-container>\n                </div>\n\n                <!-- Remove Button -->\n                <div class=\"col-md-6 text-start mt-2 align-self-center\">\n                  <i ngbTooltip=\"Remove\" (click)=\"removePartnerItem(i)\" class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n                </div>\n              </div>\n\n              <!-- Add New Partner -->\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Testimonials Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n            <h4 class=\"mb-4\">Testimonials Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Items List -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let item of testimonialsItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n\n                <pw-input-container label=\"Name\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"name\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Testimonial\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                      ngbTooltip=\"Remove\" (click)=\"removeTestimonialItem(i)\"\n                      (keydown.enter)=\"removeTestimonialItem(i)\"\n                      (keydown.space)=\"removeTestimonialItem(i)\" class=\"fa fa-trash delete-icon\"\n                      aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">+ Add Testimonial</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Video Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n            <h4 class=\"mb-3\">Video Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Video Items -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let item of videosItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeVideoItem(i)\"\n                    (keydown.enter)=\"removeVideoItem(i)\"\n                    (keydown.space)=\"removeVideoItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">+ Add Video</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Call to Actions Section (CTAs)'\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n            <h4 class=\"mb-4\">CTAs Section</h4>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Description\" name=\"description\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n             </pw-input-container>\n            </div>\n\n            <div class=\"col-12\">\n              <pw-input-container label=\"Image URL\" name=\"image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- CTA Items -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let item of ctasItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3 ng-untouched ng-pristine ng-valid ng-star-inserted\">\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Image URL\" name=\"image_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Cta URL\" name=\"cta_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"cta_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Video URL\" name=\"video_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Title\">\n                    <input class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Description\">\n                    <input class=\"form-control\" formControlName=\"description\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Button Text\">\n                    <input class=\"form-control\" formControlName=\"button_text\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-1 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeCtasItem(i)\"\n                    (keydown.enter)=\"removeCtasItem(i)\"\n                    (keydown.space)=\"removeCtasItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Integrations Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n            <h4 class=\"mb-3\">Integrations Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\">\n              <textarea class=\"form-control\" formControlName=\"description\" rows=\"3\"></textarea>\n            </pw-input-container>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div\n                *ngFor=\"let item of integrationsItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 rounded bg-light\"\n              >\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-danger\"\n                    (click)=\"removeIntegrationItem(i)\"\n                  >\n                    Remove\n                  </button>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">\n                  + Add Integration\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Contact Us Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n            <h4 class=\"mb-3\">Contact Us Section</h4>\n            <pw-input-container label=\"Url\" class=\"col-md-6\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n            </pw-input-container>\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n            <div formArrayName=\"questions\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let questionGroup of contactUsQuestions.controls; let i = index\" [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3\">\n                <pw-input-container label=\"Question\" class=\"col-md-10\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"question\" />\n                </pw-input-container>\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i class=\"fa fa-trash delete-icon\" (click)=\"removeContactUsQuestion(i)\"\n                    (keydown.enter)=\"removeContactUsQuestion(i)\" (keydown.space)=\"removeContactUsQuestion(i)\"\n                    ngbTooltip=\"Remove\" aria-hidden=\"true\"></i>\n                </div>\n                <!-- Options inside each question -->\n                <div class=\"col-12\" formArrayName=\"options\">\n                  <div class=\"row align-items-center mb-2 border p-3\"\n                    *ngFor=\"let option of getQuestionOptions(i).controls; let j = index\" [formGroupName]=\"j\">\n                    <pw-input-container label=\"Option\" class=\"col-md-10\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"option\" />\n                    </pw-input-container>\n                    <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                      <i class=\"fa fa-trash delete-icon\" (click)=\"removeContactUsOption(i, j)\"\n                        (keydown.enter)=\"removeContactUsOption(i, j)\" (keydown.space)=\"removeContactUsOption(i, j)\"\n                        ngbTooltip=\"Remove Option\" aria-hidden=\"true\"></i>\n                    </div>\n                  </div>\n                  <div class=\"text-start\">\n                    <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\"> + Add Option </button>\n                  </div>\n                </div>\n                <!-- End options -->\n              </div>\n              <div class=\"text-start mt-3\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">+ Add Question</button>\n              </div>\n            </div>\n            <div formArrayName=\"hubspot\" class=\"col-12 mt-4\">\n              <h5 class=\"mb-4\">Hubspot Embeds</h5>\n              <div *ngFor=\"let hub of contactUsHubspotItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-2\">\n                <pw-input-container label=\"ID\" class=\"col-md-4\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"id\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Position\" class=\"col-md-4\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"position\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Div\" class=\"col-10\">\n                  <textarea class=\"form-control\" rows=\"5\" formControlName=\"div\"\n                   [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\">\n                                                 </textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeHubspotItem(i)\"\n                    (keydown.enter)=\"removeHubspotItem(i)\"\n                    (keydown.space)=\"removeHubspotItem(i)\"\n                    ngbTooltip=\"Remove Hubspot Embed\"\n                    aria-hidden=\"true\">\n                  </i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">+ Add Hubspot Embed</button>\n              </div>\n            </div>\n\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Book a Demo Section'\">\n          <div class=\"row mt-4\">\n            <div class=\"col-12\">\n              <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n              <div formGroupName=\"book_demo\">\n                <pw-input-container label=\"Title\">\n                  <input type=\"text\" formControlName=\"title\" class=\"form-control\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\">\n                  <input type=\"text\" formControlName=\"description\" class=\"form-control\" />\n                </pw-input-container>\n\n                <div formArrayName=\"items\">\n                  <div *ngFor=\"let link of f['book_demo'].get('items')['controls']; let i = index\" [formGroupName]=\"i\" class=\"row mb-3\">\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link URL\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-sm-2 d-flex align-items-center mt-3\">\n                      <i\n                      ngbTooltip=\"Remove\"\n                      (click)=\"removeBookDemoLink(i)\"\n                                          (keydown.enter)=\"removeBookDemoLink(i)\"\n                                          (keydown.space)=\"removeBookDemoLink(i)\"\n                                          class=\"fa fa-trash delete-icon\"\n                                          aria-hidden=\"true\"\n                                      ></i>\n                    </div>\n                  </div>\n                  <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">+ Add Book Demo Link</button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Navbar Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n            <h4 class=\"mb-3\">Navbar Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of navbarItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row mb-3\">\n\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Path\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                </pw-input-container>\n\n                <div class=\"col-12\" formArrayName=\"subtitles\">\n                  <div *ngFor=\"let sub of getNavbarSubtitles(i).controls; let j = index\" [formGroupName]=\"j\" class=\"row border p-3 mb-2\">\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                      <i class=\"fa fa-trash delete-icon\"\n                        (click)=\"removeSubtitle(i, j)\"\n                        (keydown.enter)=\"removeSubtitle(i, j)\"\n                        (keydown.space)=\"removeSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\">\n                      </i>\n                    </div>\n                  </div>\n                  <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n                    + Add Subtitle\n                  </button>\n                </div>\n\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeNavbarItem(i)\"\n                    (keydown.enter)=\"removeNavbarItem(i)\"\n                    (keydown.space)=\"removeNavbarItem(i)\"\n                    ngbTooltip=\"Remove Navbar Item\"\n                    aria-hidden=\"true\">\n                  </i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">+ Add Navbar Item</button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Footer Links Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n            <h4 class=\"mb-3\">Footer Links Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of footerLinksItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row mb-3\">\n\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Path\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                </pw-input-container>\n\n                <div class=\"col-12\" formArrayName=\"subtitles\">\n                  <div *ngFor=\"let sub of getFooterSubtitles(i).controls; let j = index\" [formGroupName]=\"j\" class=\"row border p-3 mb-2\">\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                      <i class=\"fa fa-trash delete-icon\"\n                        (click)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.space)=\"removeFooterSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\">\n                      </i>\n                    </div>\n                  </div>\n                  <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addFooterSubtitle(i)\">\n                    + Add Subtitle\n                  </button>\n                </div>\n\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeFooterLinkItem(i)\"\n                    (keydown.enter)=\"removeFooterLinkItem(i)\"\n                    (keydown.space)=\"removeFooterLinkItem(i)\"\n                    ngbTooltip=\"Remove Footer Item\"\n                    aria-hidden=\"true\">\n                  </i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addFooterLinkItem()\">+ Add Footer Link</button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n        <p-accordionTab [header]=\"'Guides Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n            <h4 class=\"mb-3\">Guides Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of guidesItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Button Text\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"button_text\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Guide URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"guide_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"5\" formControlName=\"description\"\n                   [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\">\n                                                 </textarea>\n                 </pw-input-container>\n\n                <div class=\"col-md-1 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeGuideItem(i)\"\n                    (keydown.enter)=\"removeGuideItem(i)\"\n                    (keydown.space)=\"removeGuideItem(i)\"\n                    ngbTooltip=\"Remove Guide\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">+ Add Guide</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n\n        <p-accordionTab [header]=\"'Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)'\">\n          <div class=\"mb-3\">\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <!-- live page link -->\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                form.get('cs_product_id').touched &&\n                                                form.get('cs_product_id').invalid\n                                                    ? { border: '1px solid #ff586b' }\n                                                    : { border: '1px solid gray' }\n                                            \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                            'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n                                        \">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['cs_pdf_download_text'].errors\n                                            }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"cs_image\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image2\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n                [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_pdf_image\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n                [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n                [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg2\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n                [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n      </p-accordion>\n    </div>\n\n    <div class=\"col-12 text-end mt-3\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"back()\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n        class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n\n\n<ng-template #partnerCropper let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Partner Image</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n    <pw-image-cropper\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n      (closeEvent)=\"onClosePartnerModal()\"\n    ></pw-image-cropper>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pw-domain-config-build', template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n  <p> The following parameters and settings will be applied to all public pages of this domain. </p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"!isLoading && data?.host_name\">\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.MasterSubscription' | transloco\"\n          name=\"master_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n          <p-dropdown\n          [options]=\"masterSubscriptionsList\"\n          formControlName=\"master_subscription_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n          placeholder=\"Select Master Subscription\">\n        </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"\n                        'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n                    \"\n          name=\"master_subscription_product_id\">\n          <p-dropdown\n            [options]=\"masterSubscriptionProductList\"\n            formControlName=\"master_subscription_product_id\"\n            [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n            [placeholder]=\"'Select Master Product'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n          name=\"blog_feature_key\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"blog_feature_key\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n          name=\"main_tos_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n          <p-dropdown\n          [options]=\"subscriptionTosList\"\n          formControlName=\"main_tos_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n          [placeholder]=\"'Select Main TOS'\"\n          optionValue=\"id\">\n          <ng-template pTemplate=\"selectedItem\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n          <ng-template pTemplate=\"item\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n        </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n          name=\"crm_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n          <p-dropdown\n            [options]=\"crmSubscriptionsList\"\n            formControlName=\"crm_subscription_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n            [placeholder]=\"'Select CRM Subscription'\"\n            optionValue=\"id\">\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n          </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n          name=\"crm_product_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n          <p-dropdown\n            [options]=\"crmProductList\"\n            formControlName=\"crm_product_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n            [placeholder]=\"'Select CRM Product'\"\n            optionValue=\"id\"\n            >\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n          name=\"crm_source_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n          <p-dropdown\n            [options]=\"crmSourcesList\"\n            formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n            [placeholder]=\"'Select CRM Source'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <!-- crm subscription fields end-->\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"active\" name=\"active\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n          name=\"is_product_domain\">\n          <ui-switch size=\"small\"\n            uncheckedLabel=\"false\"\n            checkedLabel=\"true\"\n            formControlName=\"is_product_domain\"\n            name=\"is_product_domain\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n          name=\"can_register_through_main_page\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"can_register_through_main_page\"\n            name=\"can_register_through_main_page\" [ngClass]=\"{\n                                  'is-invalid': submitted && f['can_register_through_main_page'].errors\n                              }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"social_login_enabled\"\n            name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"notify_logins\"\n            name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n    </div>\n\n    <div class=\"my-5\">\n      <h3>Pre-Built Pages Config (Resources, Landing Pages, etc)</h3>\n\n      <p-accordion class=\"mt-5\">\n        <p-accordionTab [header]=\"'Instructions - README FIRST'\">\n          <div class=\"mb-3\">\n            <p>We\u2019ve built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n              UIs for onboarding users.</p>\n            <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n              <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n              Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n            <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n              <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n              appear in the <strong>Admin > Users section</strong>.</p>\n            <p>Once you\u2019ve selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n              the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n              <strong>/join/trial3</strong>.</p>\n            <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n              out.</p>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Subscribe to Product/Newsletter Config'\">\n          <div class=\"mb-3\">\n            <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n              /join/trial2, etc.</p>\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <!-- live page link -->\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                  form.get('trial_product_id').touched &&\n                                                  form.get('trial_product_id').invalid\n                                                      ? { border: '1px solid #ff586b' }\n                                                      : { border: '1px solid gray' }\n                                              \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n                                          \">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_book_demo_url'].errors\n                                              }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_cta_iframe'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_join_message'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_pdf_download_text'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"trial_image\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n                [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image2\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_pdf_image\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg2\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Header Section'\">\n          <div class=\"row mt-4\" formGroupName=\"header\">\n            <h4 class=\"mb-4\">Header Section</h4>\n\n            <!-- Headline -->\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container label=\"Header Headline\" name=\"headline\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"headline\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Video URL -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Video URL\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Background Image URL -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"bg_image_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Description -->\n            <div class=\"col-12\">\n              <pw-input-container label=\"Header Description\">\n                <textarea\n                  class=\"form-control\"\n                  rows=\"5\"\n                  formControlName=\"description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n                ></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- Sub Headings -->\n            <div formArrayName=\"sub_headings\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(headerSubHeadings, $event)\">\n              <div\n                *ngFor=\"let sub of f['header'].get('sub_headings')['controls']; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3 align-items-center\"\n                cdkDrag\n              >\n                <div class=\"col-md-10\">\n                  <pw-input-container label=\"Sub Header Description\">\n                    <textarea\n                      class=\"form-control\"\n                      rows=\"3\"\n                      formControlName=\"description\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n                    ></textarea>\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeHeaderSubHeading(i)\"\n                    (keydown.enter)=\"removeHeaderSubHeading(i)\"\n                    (keydown.space)=\"removeHeaderSubHeading(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\">\n                + Add Sub Heading\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Resources Section'\">\n          <div class=\"row row mt-4 mb-4\">\n            <h4 class=\"mb-3\">Resources Section</h4>\n            <div class=\"col-12 col-sm-6\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"resources_tagline\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"resource_image\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Unique Selling Proposition Section (USP) '\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n            <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Video Url\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12\">\n              <pw-input-container label=\"USPs Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- USP Items -->\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(uspsItems, $event)\">\n              <div\n                *ngFor=\"let item of f['usps'].get('items')['controls']; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3 align-items-center\"\n                cdkDrag\n              >\n                <div class=\"col-sm-10\">\n                  <pw-input-container label=\"Item Description\">\n                    <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeUspItem(i)\"\n                    (keydown.enter)=\"removeUspItem(i)\"\n                    (keydown.space)=\"removeUspItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n                + Add USP Item\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Partners (Clients) Section'\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n            <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n\n            <!-- Title -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Partner Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Description -->\n            <div class=\"col-12\">\n              <pw-input-container label=\"Partners Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- Partner Items with Drag Support -->\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(partnersItems, $event)\">\n              <div\n                *ngFor=\"let item of partnersItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <!-- Name -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Name\" class=\"col-12\" name=\"name\">\n                    <input class=\"form-control\" formControlName=\"name\" />\n                  </pw-input-container>\n                </div>\n\n                <!-- Blog URL + Drag Handle -->\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Blog Url\" name=\"blog_url\">\n                      <input class=\"form-control\" formControlName=\"blog_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n\n                <!-- Video URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Video Url\" name=\"video_url\">\n                    <input class=\"form-control\" formControlName=\"video_url\" />\n                  </pw-input-container>\n                </div>\n\n                <!-- Image URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Image Url\" name=\"image_url\">\n                    <input class=\"form-control\" formControlName=\"image_url\" />\n                  </pw-input-container>\n                </div>\n\n                <!-- Delete Icon -->\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i\n                    ngbTooltip=\"Remove\"\n                    (click)=\"removePartnerItem(i)\"\n                    (keydown.enter)=\"removePartnerItem(i)\"\n                    (keydown.space)=\"removePartnerItem(i)\"\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <!-- Add New Partner -->\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Testimonials Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n            <h4 class=\"mb-4\">Testimonials Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Items List -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(testimonialsItems, $event)\">\n              <div\n                *ngFor=\"let item of testimonialsItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Name\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Blog URL\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Testimonial\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    ngbTooltip=\"Remove\"\n                    (click)=\"removeTestimonialItem(i)\"\n                    (keydown.enter)=\"removeTestimonialItem(i)\"\n                    (keydown.space)=\"removeTestimonialItem(i)\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">\n                  + Add Testimonial\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Video Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n            <h4 class=\"mb-3\">Video Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Video Items -->\n            <div\n              formArrayName=\"items\"\n              class=\"col-12 mt-3\"\n              cdkDropList\n              (cdkDropListDropped)=\"dropItems(videosItems, $event)\"\n            >\n              <div\n                *ngFor=\"let item of videosItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Title\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Blog URL\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeVideoItem(i)\"\n                    (keydown.enter)=\"removeVideoItem(i)\"\n                    (keydown.space)=\"removeVideoItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">\n                  + Add Video\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Call to Actions Section (CTAs)'\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n            <h4 class=\"mb-4\">CTAs Section</h4>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Description\" name=\"description\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12\">\n              <pw-input-container label=\"Image URL\" name=\"image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- CTA Items -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(ctasItems, $event)\">\n              <div\n                *ngFor=\"let item of ctasItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Image URL\" name=\"image_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Cta URL\" name=\"cta_url\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"cta_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Video URL\" name=\"video_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Title\">\n                    <input class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Description\">\n                    <input class=\"form-control\" formControlName=\"description\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-5\">\n                  <pw-input-container label=\"Button Text\">\n                    <input class=\"form-control\" formControlName=\"button_text\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-1 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeCtasItem(i)\"\n                    (keydown.enter)=\"removeCtasItem(i)\"\n                    (keydown.space)=\"removeCtasItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Integrations Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n            <h4 class=\"mb-3\">Integrations Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\">\n              <textarea class=\"form-control\" formControlName=\"description\" rows=\"3\"></textarea>\n            </pw-input-container>\n\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(integrationsItems, $event)\">\n              <div\n                *ngFor=\"let item of integrationsItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 rounded bg-light\"\n                cdkDrag\n              >\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Description\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n                  <i\n                    class=\"fa fa-trash delete-icon align-self-center\"\n                    (click)=\"removeIntegrationItem(i)\"\n                    (keydown.enter)=\"removeIntegrationItem(i)\"\n                    (keydown.space)=\"removeIntegrationItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Contact Us Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n            <h4 class=\"mb-3\">Contact Us Section</h4>\n\n            <pw-input-container label=\"Url\" class=\"col-md-6\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n            </pw-input-container>\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <div formArrayName=\"questions\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsQuestions, $event)\">\n              <div\n                *ngFor=\"let questionGroup of contactUsQuestions.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3\"\n                cdkDrag\n              >\n                <pw-input-container label=\"Question\" class=\"col-md-10\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"question\" />\n                </pw-input-container>\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeContactUsQuestion(i)\"\n                    (keydown.enter)=\"removeContactUsQuestion(i)\"\n                    (keydown.space)=\"removeContactUsQuestion(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-12 mt-3\" formArrayName=\"options\" cdkDropList [cdkDropListData]=\"getQuestionOptions(i).controls\" (cdkDropListDropped)=\"dropContactUsOptions(i, $event)\">\n                  <div\n                    class=\"row align-items-center mb-2 border p-3\"\n                    *ngFor=\"let option of getQuestionOptions(i).controls; let j = index\"\n                    [formGroupName]=\"j\"\n                    cdkDrag\n                  >\n                    <pw-input-container label=\"Option\" class=\"col-md-10\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"option\" />\n                    </pw-input-container>\n\n                    <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeContactUsOption(i, j)\"\n                        (keydown.enter)=\"removeContactUsOption(i, j)\"\n                        (keydown.space)=\"removeContactUsOption(i, j)\"\n                        ngbTooltip=\"Remove Option\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n\n                    <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder option\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <div class=\"text-start\">\n                    <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\">\n                      + Add Option\n                    </button>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-3\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">\n                  + Add Question\n                </button>\n              </div>\n            </div>\n\n            <div formArrayName=\"hubspot\" class=\"col-12 mt-4\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsHubspotItems, $event)\">\n              <h5 class=\"mb-4\">Hubspot Embeds</h5>\n\n              <div\n                *ngFor=\"let hub of contactUsHubspotItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-2\"\n                cdkDrag\n              >\n              <pw-input-container label=\"ID\" class=\"col-md-5\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"id\" />\n              </pw-input-container>\n\n              <pw-input-container label=\"Position\" class=\"col-md-6\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"position\" />\n              </pw-input-container>\n              <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-3\">\n                <i\n                  class=\"fa fa-bars cursor-move\"\n                  cdkDragHandle\n                  ngbTooltip=\"Drag to reorder\"\n                  aria-hidden=\"true\"\n                ></i>\n              </div>\n\n                <pw-input-container label=\"Div\" class=\"col-10\">\n                  <textarea\n                    class=\"form-control\"\n                    rows=\"5\"\n                    formControlName=\"div\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\"\n                  ></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeHubspotItem(i)\"\n                    (keydown.enter)=\"removeHubspotItem(i)\"\n                    (keydown.space)=\"removeHubspotItem(i)\"\n                    ngbTooltip=\"Remove Hubspot Embed\"\n                    aria-hidden=\"true\">\n</i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">\n                  + Add Hubspot Embed\n                </button>\n              </div>\n            </div>\n\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Book a Demo Section'\">\n          <div class=\"row mt-4\">\n            <div class=\"col-12\">\n              <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n              <div formGroupName=\"book_demo\">\n                <pw-input-container label=\"Title\">\n                  <input type=\"text\" formControlName=\"title\" class=\"form-control\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\">\n                  <input type=\"text\" formControlName=\"description\" class=\"form-control\" />\n                </pw-input-container>\n\n                <div formArrayName=\"items\" cdkDropList (cdkDropListDropped)=\"dropBookDemoLinks($event)\">\n                  <div\n                    *ngFor=\"let link of f['book_demo'].get('items')['controls']; let i = index\"\n                    [formGroupName]=\"i\"\n                    class=\"row mb-3 border p-3 align-items-center\"\n                    cdkDrag\n                  >\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link URL\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                      <i\n                        ngbTooltip=\"Remove\"\n                        (click)=\"removeBookDemoLink(i)\"\n                        (keydown.enter)=\"removeBookDemoLink(i)\"\n                        (keydown.space)=\"removeBookDemoLink(i)\"\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n\n                    <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">\n                    + Add Book Demo Link\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Navbar Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n            <h4 class=\"mb-3\">Navbar Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(navbarItems, $event)\">\n              <div\n                *ngFor=\"let item of navbarItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3\"\n                cdkDrag\n              >\n                <div class=\"row align-items-center\">\n                  <pw-input-container label=\"Title\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n\n                  <pw-input-container label=\"Path\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                  </pw-input-container>\n\n                  <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n                    <i\n                      class=\"fa fa-trash delete-icon text-danger\"\n                      (click)=\"removeNavbarItem(i)\"\n                      (keydown.enter)=\"removeNavbarItem(i)\"\n                      (keydown.space)=\"removeNavbarItem(i)\"\n                      ngbTooltip=\"Remove Navbar Item\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n\n                  <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n                    <i\n                      class=\"fa fa-bars cursor-move\"\n                      cdkDragHandle\n                      ngbTooltip=\"Drag to reorder\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n                </div>\n\n                <div\n                  class=\"col-12 mt-3\"\n                  formArrayName=\"subtitles\"\n                  cdkDropList\n                  [cdkDropListData]=\"getNavbarSubtitles(i).controls\"\n                  (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\"\n                >\n                  <div\n                    *ngFor=\"let sub of getNavbarSubtitles(i).controls; let j = index\"\n                    [formGroupName]=\"j\"\n                    class=\"row border p-3 mb-2 align-items-center\"\n                    cdkDrag\n                  >\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeSubtitle(i, j)\"\n                        (keydown.enter)=\"removeSubtitle(i, j)\"\n                        (keydown.space)=\"removeSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n\n                    <div class=\"col-md-1 d-flex justify-content-end\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n                    + Add Subtitle\n                  </button>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">\n                + Add Navbar Item\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Footer Links Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n            <h4 class=\"mb-3\">Footer Links Section</h4>\n\n            <div\n              formArrayName=\"items\"\n              class=\"col-12\"\n              cdkDropList\n              (cdkDropListDropped)=\"dropItems(footerLinksItems, $event)\"\n            >\n              <div\n                *ngFor=\"let item of footerLinksItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3\"\n                cdkDrag\n              >\n                <div class=\"row align-items-center\">\n\n                  <pw-input-container label=\"Title\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n\n                  <pw-input-container label=\"Path\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                  </pw-input-container>\n                  <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n                    <i\n                      class=\"fa fa-trash delete-icon text-danger\"\n                      (click)=\"removeFooterLinkItem(i)\"\n                      (keydown.enter)=\"removeFooterLinkItem(i)\"\n                      (keydown.space)=\"removeFooterLinkItem(i)\"\n                      ngbTooltip=\"Remove Footer Item\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n                  <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n                    <i\n                      class=\"fa fa-bars cursor-move\"\n                      cdkDragHandle\n                      ngbTooltip=\"Drag to reorder\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n\n                </div>\n\n                <div\n                  class=\"col-12 mt-3\"\n                  formArrayName=\"subtitles\"\n                  cdkDropList\n                  [cdkDropListData]=\"getFooterSubtitles(i).controls\"\n                  (cdkDropListDropped)=\"dropFooterSubtitles(i, $event)\"\n                >\n                  <div\n                    *ngFor=\"let sub of getFooterSubtitles(i).controls; let j = index\"\n                    [formGroupName]=\"j\"\n                    class=\"row border p-3 mb-2 align-items-center\"\n                    cdkDrag\n                  >\n\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n\n\n\n\n                    <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.space)=\"removeFooterSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                    <div class=\"col-md-1 d-flex justify-content-end\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-sm btn-primary mt-2\"\n                    (click)=\"addFooterSubtitle(i)\"\n                  >\n                    + Add Subtitle\n                  </button>\n                </div>\n              </div>\n\n              <button\n                type=\"button\"\n                class=\"btn btn-primary mt-2 mb-2\"\n                (click)=\"addFooterLinkItem()\"\n              >\n                + Add Footer Link\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n\n\n        <p-accordionTab [header]=\"'Guides Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n            <h4 class=\"mb-3\">Guides Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div cdkDropList (cdkDropListDropped)=\"dropItems(guidesItems, $event)\">\n                <div\n                  *ngFor=\"let item of guidesItems.controls; let i = index\"\n                  [formGroupName]=\"i\"\n                  class=\"border p-3 mb-3\"\n                  cdkDrag\n                >\n                  <div class=\"row align-items-start\">\n\n                    <pw-input-container label=\"Title\" class=\"col-md-5\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                    </pw-input-container>\n\n                    <pw-input-container label=\"Button Text\" class=\"col-md-6\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"button_text\" />\n                    </pw-input-container>\n                    <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <div class=\"row mt-2\">\n                    <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                    </pw-input-container>\n\n                    <pw-input-container label=\"Guide URL\" class=\"col-md-6\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"guide_url\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"row mt-2\">\n                    <pw-input-container label=\"Description\" class=\"col-md-11\">\n                      <textarea\n                        class=\"form-control\"\n                        rows=\"5\"\n                        formControlName=\"description\"\n                        [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n                      ></textarea>\n                    </pw-input-container>\n\n                    <div class=\"col-md-1 d-flex align-items-start justify-content-center mt-3\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeGuideItem(i)\"\n                        (keydown.enter)=\"removeGuideItem(i)\"\n                        (keydown.space)=\"removeGuideItem(i)\"\n                        ngbTooltip=\"Remove Guide\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">\n                  + Add Guide\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n        <p-accordionTab [header]=\"'AB Tests Section'\">\n          <div class=\"row mt-3 mb-4\">\n            <h4 class=\"mb-3\">AB Tests</h4>\n            <div formArrayName=\"ab_tests\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(abTests, $event)\">\n              <div\n                *ngFor=\"let abTest of abTests.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3 border p-3\"\n                cdkDrag\n              >\n                <pw-input-container label=\"Description\" class=\"col-md-5\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Experiment Name\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"experiment_name\" />\n                </pw-input-container>\n\n\n                <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <pw-input-container label=\"DB Shard\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"db_shard\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Microservice Name\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"microservice_name\" />\n                </pw-input-container>\n\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeAbTest(i)\"\n                    (keydown.enter)=\"removeAbTest(i)\"\n                    (keydown.space)=\"removeAbTest(i)\"\n                    ngbTooltip=\"Remove AB Test\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addAbTest()\">+ Add AB Test</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n\n\n        <p-accordionTab [header]=\"'Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)'\">\n          <div class=\"mb-3\">\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                form.get('cs_product_id').touched &&\n                                                form.get('cs_product_id').invalid\n                                                    ? { border: '1px solid #ff586b' }\n                                                    : { border: '1px solid gray' }\n                                            \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                            'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n                                        \">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['cs_pdf_download_text'].errors\n                                            }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"cs_image\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image2\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n                [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_pdf_image\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n                [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n                [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg2\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n                [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n      </p-accordion>\n    </div>\n\n    <div class=\"col-12 text-end mt-3\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"back()\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n        class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n\n\n<ng-template #partnerCropper let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Partner Image</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n    <pw-image-cropper\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n      (closeEvent)=\"onClosePartnerModal()\"\n    ></pw-image-cropper>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }, { type: i1$2.ProductService }, { type: i1$1.NgbModal }, { type: i3$2.FormBuilder }], propDecorators: { uploader: [{
                 type: ViewChildren,
                 args: [CustomUploaderComponent]
@@ -1487,7 +1582,7 @@ class DomainConfigOrganizationComponent extends AppBaseComponent {
     getDomainConfigDetails() {
         this.isLoading = true;
         this.adminService
-            .getDomainConfigById(this.duplicateConfigId || this.id, this.subscriptionId)
+            .getDomainConfigById(HelperService.effectiveConfigId(this.duplicateConfigId, this.id), this.subscriptionId)
             .subscribe((response) => {
             this.data = response;
             this.form.patchValue(this.data);
@@ -1562,7 +1657,7 @@ class DomainConfigSecurityComponent extends AppBaseComponent {
     getDomainConfigDetails() {
         this.isLoading = true;
         this.adminService
-            .getDomainConfigById(this.duplicateConfigId || this.id, this.subscriptionId)
+            .getDomainConfigById(HelperService.effectiveConfigId(this.duplicateConfigId, this.id), this.subscriptionId)
             .subscribe((response) => {
             this.data = response;
             this.form.patchValue(this.data);
@@ -1637,7 +1732,7 @@ class DomainConfigSocialComponent extends AppBaseComponent {
     getDomainConfigDetails() {
         this.isLoading = true;
         this.adminService
-            .getDomainConfigById(this.duplicateConfigId || this.id, this.subscriptionId)
+            .getDomainConfigById(HelperService.effectiveConfigId(this.duplicateConfigId, this.id), this.subscriptionId)
             .subscribe(response => {
             this.data = response;
             this.form.patchValue(this.data);
@@ -1712,7 +1807,7 @@ class DomainConfigIntegrationsComponent extends AppBaseComponent {
     getDomainConfigDetails() {
         this.isLoading = true;
         this.adminService
-            .getDomainConfigById(this.duplicateConfigId || this.id, this.subscriptionId)
+            .getDomainConfigById(HelperService.effectiveConfigId(this.duplicateConfigId, this.id), this.subscriptionId)
             .subscribe((response) => {
             this.data = response;
             this.form.patchValue(this.data);
@@ -1804,7 +1899,7 @@ class DomainConfigInterfaceComponent extends AppBaseComponent {
     getDomainConfigDetails() {
         this.isLoading = true;
         this.adminService
-            .getDomainConfigById(this.duplicateConfigId || this.id, this.subscriptionId)
+            .getDomainConfigById(HelperService.effectiveConfigId(this.duplicateConfigId, this.id), this.subscriptionId)
             .subscribe((response) => {
             this.data = response;
             this.form.patchValue(this.data);
@@ -1905,7 +2000,7 @@ class DomainConfigDetailsComponent extends AppBaseComponent {
             }
         });
         this.route.queryParams.subscribe(res => {
-            this.activeTab = res['tabId'] || 'Core';
+            this.activeTab = res['tabId'] ?? 'Core';
         });
     }
     onTabChange(event) {
@@ -2098,7 +2193,7 @@ class AddFaqComponent extends AppBaseComponent {
             });
             this.categoryForBadges = response.available_category.map(x => x.key);
             this.categories = response.available_category.map(element => {
-                return { label: element.name || '', value: element.key };
+                return { label: element.name ?? '', value: element.key };
             });
             this.allFaqs = this.faqs;
             this.faqList = this.faqs;
@@ -2139,7 +2234,7 @@ class AddFaqComponent extends AppBaseComponent {
                 this.featureKeysList = featureKeys.map(element => {
                     return {
                         value: element,
-                        label: element || ''
+                        label: element ?? ''
                     };
                 });
             }
@@ -2282,7 +2377,7 @@ class EditFaqComponent extends AppBaseComponent {
         this.categories = [];
         this.commonService.getFaqCategories(this.subscriptionId).subscribe(response => {
             this.categories = response.map(element => {
-                return { label: element.name || '', value: element.key };
+                return { label: element.name ?? '', value: element.key };
             });
         });
     }
@@ -2335,7 +2430,7 @@ class EditFaqComponent extends AppBaseComponent {
                 this.featureKeysList = featureKeys.map(element => {
                     return {
                         value: element,
-                        label: element || ''
+                        label: element ?? ''
                     };
                 });
             }
@@ -2486,7 +2581,7 @@ class FaqListComponent extends AppBaseComponent {
             this.categoryForBadges = response.available_category.map(x => x.key);
             categories.forEach(element => {
                 this.categories.push({
-                    label: element.name || '',
+                    label: element.name ?? '',
                     value: element.key
                 });
             });
@@ -2497,7 +2592,7 @@ class FaqListComponent extends AppBaseComponent {
     /** Function to filter faq list */
     filterFaq() {
         if (this.searchText) {
-            const searchedList = this.faqList.filter(faq => faq['question'].toLowerCase().includes(this.searchText.toLowerCase()) ||
+            const searchedList = this.faqList.filter(faq => faq['question'].toLowerCase().includes(this.searchText.toLowerCase()) ??
                 faq['answer'].toLowerCase().includes(this.searchText.toLowerCase()));
             this.faqs = searchedList;
         }
@@ -2525,7 +2620,7 @@ class FaqListComponent extends AppBaseComponent {
                 this.featureKeysList = featureKeys.map(element => {
                     return {
                         value: element,
-                        label: element || ''
+                        label: element ?? ''
                     };
                 });
             }
@@ -3265,7 +3360,7 @@ class LoginNotificationDetailsComponent extends AppBaseComponent {
             this.form.patchValue({
                 visible_until: data?.visible_until ? new Date(data?.visible_until) : '',
                 visible_from: data?.visible_from ? new Date(data?.visible_from) : '',
-                feature_keys: data?.feature_keys || [],
+                feature_keys: data?.feature_keys ?? [],
                 notification_type: data?.notification_type,
                 is_permanent: data?.is_permanent,
                 body: data?.body
@@ -4819,7 +4914,7 @@ class ProductDetailsComponent extends AppBaseComponent {
                 this.productsList = resp.products.map(element => {
                     return {
                         value: element.id,
-                        label: element.name || ''
+                        label: element.name ?? ''
                     };
                 });
             }
@@ -4869,7 +4964,7 @@ class ProductDetailsComponent extends AppBaseComponent {
             if (response?.categories) {
                 response.categories.forEach(element => {
                     const item = {
-                        label: element || '',
+                        label: element ?? '',
                         value: element
                     };
                     this.categories.push(item);
@@ -5172,7 +5267,7 @@ class ProductsListComponent extends AppBaseComponent {
                 this.featureKeysList = response.products.map(element => {
                     return {
                         value: element.feature_key,
-                        label: element.feature_key || ''
+                        label: element.feature_key ?? ''
                     };
                 });
                 this.featureKeysList = uniqBy(this.featureKeysList, 'label');
@@ -5209,7 +5304,7 @@ class ProductsListComponent extends AppBaseComponent {
     getCategories() {
         this.productService.getProductCategories().subscribe(response => {
             if (response?.categories) {
-                this.categories = response?.categories || [];
+                this.categories = response?.categories ?? [];
             }
         });
     }
@@ -5321,7 +5416,7 @@ class ResourceAdminDetailsComponent extends AppBaseComponent {
         this.tagsSuggestion = [];
         this.selectedTags = [];
         this.isLoading = true;
-        this.routers = ROUTERS;
+        this.routers = ADMIN_ROUTERS;
         QuillHelper.init();
         this.editorConfig = QuillHelper.getEditorConfig();
         this.form = AppAdmin.getResourcesForm();
@@ -5340,7 +5435,7 @@ class ResourceAdminDetailsComponent extends AppBaseComponent {
         }
         this.route.params.subscribe(params => {
             console.log(params['slug']);
-            this.slug = params['slug'] || '';
+            this.slug = params['slug'] ?? '';
             if (this.slug !== 'create') {
                 this.getBlogItem(this.slug);
             }
@@ -5462,61 +5557,91 @@ class ResourceAdminDetailsComponent extends AppBaseComponent {
     }
     onUpdate() {
         const data = { ...this.form.value };
+        this.handleRectangularPicture(data);
+        this.handlePicture(data);
+        this.handlePublishedAt(data);
+        this.handleAcceptedAt(data);
+        this.handleOptionalFields(data);
+        this.handleRemovals(data);
+        this.updatePost(data);
+    }
+    handleRectangularPicture(data) {
         if (this.rectangularFile) {
             data.rectangular_picture = this.rectangularFile;
         }
         else {
             delete data.rectangular_picture;
         }
+    }
+    handlePicture(data) {
         if (this.file) {
             data.picture = this.file;
         }
         else {
             delete data.picture;
         }
-        if (this.form.get('published_at').dirty) {
-            if (this.form.get('published_at').value) {
-                data.published_at = moment().format('DD-MMM-YYYY');
-            }
-            else {
-                data.published_at = '';
-            }
+    }
+    handlePublishedAt(data) {
+        const control = this.form.get('published_at');
+        if (control?.dirty) {
+            data.published_at = control.value ? moment().format('DD-MMM-YYYY') : '';
         }
         else {
             delete data.published_at;
         }
-        if (this.form.get('accepted_at').dirty) {
-            if (this.form.get('accepted_at').value) {
-                data.accepted_at = moment().format('DD-MMM-YYYY');
-            }
-            else {
-                data.accepted_at = '';
-            }
+    }
+    handleAcceptedAt(data) {
+        const control = this.form.get('accepted_at');
+        if (control?.dirty) {
+            data.accepted_at = control.value ? moment().format('DD-MMM-YYYY') : '';
         }
         else {
             delete data.accepted_at;
         }
-        if (!this.form.get('when').value) {
+    }
+    handleOptionalFields(data) {
+        if (!this.form.get('when')?.value) {
             data.when = '';
         }
-        if (!this.form.get('showcase').value) {
+        if (!this.form.get('showcase')?.value) {
             data.showcase = '';
         }
+    }
+    handleRemovals(data) {
+        if (!this.file && !this.image) {
+            data.remove_picture = true;
+        }
+        if (!this.rectangularFile && !this.rectangularImage) {
+            data.remove_rectangular_picture = true;
+        }
+    }
+    updatePost(data) {
         this.postTags(this.blog.id);
         this.adminService
             .updatePost(data, this.id)
             .subscribe(() => {
             this.toast.success(this.translation.translate('Resource.UpdatedMessage'));
-            this.router.navigate(['/' + this.routers.resourcesList], {
-                state: {
-                    ...this.filterData
-                }
-            });
+            this.navigateToResourceList();
         })
             .add(() => {
             this.submitted = false;
         });
     }
+    navigateToResourceList() {
+        this.router.navigate(['/' + this.routers.resourcesList], {
+            state: {
+                ...this.filterData
+            }
+        });
+    }
+    deleteCoverImage() {
+        this.image = null;
+        this.file = null;
+    }
+    deleteRectangularImage() {
+        this.rectangularImage = null;
+        this.rectangularFile = null;
+    }
     getPostTags() {
         this.tagService
             .getTagsByType('post_categories', {}, this.subscriptionId)
@@ -5554,7 +5679,7 @@ class ResourceAdminDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceAdminDetailsComponent, deps: [{ token: i1$1.NgbModal }, { token: i1.AdminService }, { token: i0.Injector }, { token: i1$2.TagService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceAdminDetailsComponent, selector: "pw-resources-details-index", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n         Add or edit resource\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Label.Title' | transloco\"\n              class=\"col-12\"\n              name=\"title\"\n              [errorMsg]=\"'Resource.Posts.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Resource.Posts.Body' | transloco\"\n              class=\"col-9 col-md-9 col-sm-12\"\n              name=\"body\"\n              [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '500px' }\"\n              class=\"quillEditor\" [modules]=\"editorConfig\"\n                formControlName=\"body\"\n                [ngClass]=\"{\n                  'w-100': true,\n                  'quill-container': true,\n                  'is-invalid': submitted && f['body'].errors\n                }\">\n              </quill-editor>\n            </pw-input-container>\n            <div class=\"col-12 col-md-3 col-sm-4 my-4\">\n              <div class=\"text-center mb-4\">\n                <label for=\"coverPicture\">{{ 'Resource.Posts.CoverPicture' | transloco }}</label>\n                <div class=\"text-center\">\n                  <img [src]=\"(image !== null && !image?.includes('default-photo.jpg') )? image : 'assets/img/resource/blog.png'\"\n                      (keydown.enter)=\"openModal(content)\"\n                      (click)=\"openModal(content)\"\n                      class=\"image w-100\" alt=\"Modal\"\n                      (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n                  <a aria-label=\"Edit Picture\" class=\"d-inline-block mb-2\" (click)=\"openModal(content)\">\n                    {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                  </a>\n                </div>\n              </div>\n\n              <!-- Rectangular Picture -->\n              <div class=\"text-center d-flex flex-column align-items-center\">\n                <label for=\"rectangularPicture\">Rectangular Picture</label>\n                <img\n                  [src]=\"(rectangularImage !== null && !rectangularImage?.includes('default-photo.jpg')) ? rectangularImage : 'assets/img/resource/blog.png'\"\n                  (keydown.enter)=\"openRectModal(rectContent)\"\n                  (click)=\"openRectModal(rectContent)\"\n                  class=\"image rec-img\"\n                  [ngClass]=\"{ 'w-100': rectangularImage === null || rectangularImage?.includes('default-photo.jpg') }\"\n                  alt=\"Rectangular Picture\"\n                  (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n\n                <a class=\"d-inline-block mt-2\" (click)=\"openRectModal(rectContent)\">\n                  {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                </a>\n              </div>\n\n            </div>\n            <pw-input-container [label]=\"'Resource.Posts.CtaText' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n              name=\"cta_text\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"cta_text\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.ExternalUrl' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.ExternalUrl' | transloco\"\n              name=\"external_url\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"external_url\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['external_url'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.Tags' | transloco \" class=\"ui-fluid skills-modal col-12 col-md-4 col-sm-12 tags\"\n              [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\" name=\"cta_text\">\n              <p-autoComplete [(ngModel)]=\"selectedTags\" class=\"body-bg\" [suggestions]=\"tagsSuggestion\" dataKey=\"id\" field=\"name\"\n                (completeMethod)=\"search($event)\" styleClass=\"w-100\" [minLength]=\"1\" [maxlength]=\"10\" [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\" placeholder=\"Tags\" [multiple]=\"true\">\n              </p-autoComplete>\n            </pw-input-container>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Resource.Posts.When' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n                  name=\"when\">\n                  <div>\n                    <p-calendar formControlName=\"when\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Select Date'\"\n                      [ngClass]=\"{'is-invalid': submitted && f['when'].errors}\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.ShowCase' | transloco\"\n                  [label]=\"'Resource.Posts.ShowCase' | transloco\" name=\"showcase\">\n                  <ui-switch class=\"d-block\" formControlName=\"showcase\" name=\"showcase\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Published At -->\n            <div class=\"col-12 col-md-2 col-sm-6\">\n\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.Published' | transloco\"\n                  [label]=\"'Resource.Posts.Published' | transloco\"\n                  name=\"published_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"published_at\"\n                  name=\"published_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Accepted At -->\n\n            <div class=\"col-12 col-md-2 col-sm-6 accept-icon\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.AcceptedByAdmin' | transloco\"\n                  [label]=\"'Resource.Posts.AcceptedByAdmin' | transloco\"\n                  name=\"accepted_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"accepted_at\"\n                  name=\"accepted_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"submitted\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\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    <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)</small>\n    <pw-image-cropper #profile\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n\n<ng-template #rectContent let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n\n  <div class=\"modal-body\">\n    <small>\n      You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)\n    </small>\n\n\n    <pw-image-cropper\n      #profile\n      [aspectRatio]=\"'dynamic'\"\n      [dynamicData]=\"getAspectRatio()\"\n      (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".col-md-6.display-grid{display:grid}body .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container{width:100%}body .ui-inputtext{padding:0}.comment{border:1px solid rgb(238,238,238)}.is-invalid .ql-container.ql-snow,.is-invalid .ql-toolbar.ql-snow{border-color:#dc3545}.rec-img{max-width:100%;max-height:400px!important}.body-bg span .ui-autocomplete-multiple-container{background-color:#f5f7fa}.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token{color:var(--tabs_text)}.tags .info-circle .tooltiptext:after{left:25px!important}.tags .info-circle .tooltiptext{left:-30px!important}.accept-icon .info-circle .tooltiptext:after{left:110px!important}.accept-icon .info-circle .tooltiptext{right:-85px!important}\n"], dependencies: [{ kind: "component", type: i4$3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i8.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceAdminDetailsComponent, selector: "pw-resources-details-index", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"navigateToResourceList()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n         Add or edit resource\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Label.Title' | transloco\"\n              class=\"col-12\"\n              name=\"title\"\n              [errorMsg]=\"'Resource.Posts.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Resource.Posts.Body' | transloco\"\n              class=\"col-9 col-md-9 col-sm-12\"\n              name=\"body\"\n              [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '500px' }\"\n              class=\"quillEditor\" [modules]=\"editorConfig\"\n                formControlName=\"body\"\n                [ngClass]=\"{\n                  'w-100': true,\n                  'quill-container': true,\n                  'is-invalid': submitted && f['body'].errors\n                }\">\n              </quill-editor>\n            </pw-input-container>\n            <div class=\"col-12 col-md-3 col-sm-4 my-4\">\n              <div class=\"text-center mb-4\">\n                <label for=\"coverPicture\">{{ 'Resource.Posts.CoverPicture' | transloco }}</label>\n                <div class=\"text-center text-center d-flex flex-column align-items-center\">\n                  <img [src]=\"(image !== null && !image?.includes('default-photo.jpg') )? image : 'assets/img/resource/blog.png'\"\n                      (keydown.enter)=\"openModal(content)\"\n                      (click)=\"openModal(content)\"\n                      class=\"image w-100\" alt=\"Modal\"\n                      (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n                      <div class=\"d-flex justify-content-between align-items-center mt-2\">\n                        <a class=\"d-inline-block\" (click)=\"openModal(content)\">\n                          {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                        </a>\n                        <i\n                        class=\"fa fa-trash delete-icon text-danger ms-2\"\n                        title=\"Remove Image\"\n                        (click)=\"deleteCoverImage()\"\n                        (keydown.enter)=\"deleteCoverImage()\"\n                        style=\"cursor: pointer;\"\n                        *ngIf=\"image && !image.includes('default-photo.jpg')\">\n                        </i>\n                      </div>\n                </div>\n              </div>\n\n              <!-- Rectangular Picture -->\n              <div class=\"text-center d-flex flex-column align-items-center\">\n                <label for=\"rectangularPicture\">Rectangular Picture</label>\n                <img\n                  [src]=\"(rectangularImage !== null && !rectangularImage?.includes('default-photo.jpg')) ? rectangularImage : 'assets/img/resource/blog.png'\"\n                  (keydown.enter)=\"openRectModal(rectContent)\"\n                  (click)=\"openRectModal(rectContent)\"\n                  class=\"image rec-img\"\n                  [ngClass]=\"{ 'w-100': rectangularImage === null || rectangularImage?.includes('default-photo.jpg') }\"\n                  alt=\"Uploaded rectangular media preview\"\n                  (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n                  <div class=\"d-flex justify-content-between align-items-center mt-2\">\n                    <a class=\"d-inline-block\" (click)=\"openRectModal(rectContent)\">\n                      {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                    </a>\n                    <i\n                      class=\"fa fa-trash delete-icon text-danger ms-2\"\n                      title=\"Remove Image\"\n                      (click)=\"deleteRectangularImage()\"\n                      (keydown.enter)=\"deleteRectangularImage()\"\n                      style=\"cursor: pointer;\"\n                      *ngIf=\"rectangularImage && !rectangularImage.includes('default-photo.jpg')\">\n                    </i>\n                  </div>\n\n              </div>\n\n            </div>\n            <pw-input-container [label]=\"'Resource.Posts.CtaText' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n              name=\"cta_text\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"cta_text\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.ExternalUrl' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.ExternalUrl' | transloco\"\n              name=\"external_url\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"external_url\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['external_url'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.Tags' | transloco \" class=\"ui-fluid skills-modal col-12 col-md-4 col-sm-12 tags\"\n              [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\" name=\"cta_text\">\n              <p-autoComplete [(ngModel)]=\"selectedTags\" class=\"body-bg\" [suggestions]=\"tagsSuggestion\" dataKey=\"id\" field=\"name\"\n                (completeMethod)=\"search($event)\" styleClass=\"w-100\" [minLength]=\"1\" [maxlength]=\"10\" [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\" placeholder=\"Tags\" [multiple]=\"true\">\n              </p-autoComplete>\n            </pw-input-container>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Resource.Posts.When' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n                  name=\"when\">\n                  <div>\n                    <p-calendar formControlName=\"when\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Select Date'\"\n                      [ngClass]=\"{'is-invalid': submitted && f['when'].errors}\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.ShowCase' | transloco\"\n                  [label]=\"'Resource.Posts.ShowCase' | transloco\" name=\"showcase\">\n                  <ui-switch class=\"d-block\" formControlName=\"showcase\" name=\"showcase\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Published At -->\n            <div class=\"col-12 col-md-2 col-sm-6\">\n\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.Published' | transloco\"\n                  [label]=\"'Resource.Posts.Published' | transloco\"\n                  name=\"published_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"published_at\"\n                  name=\"published_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Accepted At -->\n\n            <div class=\"col-12 col-md-2 col-sm-6 accept-icon\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.AcceptedByAdmin' | transloco\"\n                  [label]=\"'Resource.Posts.AcceptedByAdmin' | transloco\"\n                  name=\"accepted_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"accepted_at\"\n                  name=\"accepted_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"navigateToResourceList()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"submitted\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\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    <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)</small>\n    <pw-image-cropper #profile\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n\n<ng-template #rectContent let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n\n  <div class=\"modal-body\">\n    <small>\n      You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)\n    </small>\n\n\n    <pw-image-cropper\n      #profile\n      [aspectRatio]=\"'dynamic'\"\n      [dynamicData]=\"getAspectRatio()\"\n      (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".col-md-6.display-grid{display:grid}body .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container{width:100%}body .ui-inputtext{padding:0}.comment{border:1px solid rgb(238,238,238)}.is-invalid .ql-container.ql-snow,.is-invalid .ql-toolbar.ql-snow{border-color:#dc3545}.rec-img{max-width:100%;max-height:400px!important}.body-bg span .ui-autocomplete-multiple-container{background-color:#f5f7fa}.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token{color:var(--tabs_text)}.tags .info-circle .tooltiptext:after{left:25px!important}.tags .info-circle .tooltiptext{left:-30px!important}.accept-icon .info-circle .tooltiptext:after{left:110px!important}.accept-icon .info-circle .tooltiptext{right:-85px!important}\n"], dependencies: [{ kind: "component", type: i4$3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i8.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -5564,7 +5689,7 @@ __decorate([
 ], ResourceAdminDetailsComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceAdminDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-resources-details-index', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n         Add or edit resource\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Label.Title' | transloco\"\n              class=\"col-12\"\n              name=\"title\"\n              [errorMsg]=\"'Resource.Posts.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Resource.Posts.Body' | transloco\"\n              class=\"col-9 col-md-9 col-sm-12\"\n              name=\"body\"\n              [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '500px' }\"\n              class=\"quillEditor\" [modules]=\"editorConfig\"\n                formControlName=\"body\"\n                [ngClass]=\"{\n                  'w-100': true,\n                  'quill-container': true,\n                  'is-invalid': submitted && f['body'].errors\n                }\">\n              </quill-editor>\n            </pw-input-container>\n            <div class=\"col-12 col-md-3 col-sm-4 my-4\">\n              <div class=\"text-center mb-4\">\n                <label for=\"coverPicture\">{{ 'Resource.Posts.CoverPicture' | transloco }}</label>\n                <div class=\"text-center\">\n                  <img [src]=\"(image !== null && !image?.includes('default-photo.jpg') )? image : 'assets/img/resource/blog.png'\"\n                      (keydown.enter)=\"openModal(content)\"\n                      (click)=\"openModal(content)\"\n                      class=\"image w-100\" alt=\"Modal\"\n                      (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n                  <a aria-label=\"Edit Picture\" class=\"d-inline-block mb-2\" (click)=\"openModal(content)\">\n                    {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                  </a>\n                </div>\n              </div>\n\n              <!-- Rectangular Picture -->\n              <div class=\"text-center d-flex flex-column align-items-center\">\n                <label for=\"rectangularPicture\">Rectangular Picture</label>\n                <img\n                  [src]=\"(rectangularImage !== null && !rectangularImage?.includes('default-photo.jpg')) ? rectangularImage : 'assets/img/resource/blog.png'\"\n                  (keydown.enter)=\"openRectModal(rectContent)\"\n                  (click)=\"openRectModal(rectContent)\"\n                  class=\"image rec-img\"\n                  [ngClass]=\"{ 'w-100': rectangularImage === null || rectangularImage?.includes('default-photo.jpg') }\"\n                  alt=\"Rectangular Picture\"\n                  (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n\n                <a class=\"d-inline-block mt-2\" (click)=\"openRectModal(rectContent)\">\n                  {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                </a>\n              </div>\n\n            </div>\n            <pw-input-container [label]=\"'Resource.Posts.CtaText' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n              name=\"cta_text\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"cta_text\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.ExternalUrl' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.ExternalUrl' | transloco\"\n              name=\"external_url\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"external_url\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['external_url'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.Tags' | transloco \" class=\"ui-fluid skills-modal col-12 col-md-4 col-sm-12 tags\"\n              [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\" name=\"cta_text\">\n              <p-autoComplete [(ngModel)]=\"selectedTags\" class=\"body-bg\" [suggestions]=\"tagsSuggestion\" dataKey=\"id\" field=\"name\"\n                (completeMethod)=\"search($event)\" styleClass=\"w-100\" [minLength]=\"1\" [maxlength]=\"10\" [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\" placeholder=\"Tags\" [multiple]=\"true\">\n              </p-autoComplete>\n            </pw-input-container>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Resource.Posts.When' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n                  name=\"when\">\n                  <div>\n                    <p-calendar formControlName=\"when\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Select Date'\"\n                      [ngClass]=\"{'is-invalid': submitted && f['when'].errors}\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.ShowCase' | transloco\"\n                  [label]=\"'Resource.Posts.ShowCase' | transloco\" name=\"showcase\">\n                  <ui-switch class=\"d-block\" formControlName=\"showcase\" name=\"showcase\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Published At -->\n            <div class=\"col-12 col-md-2 col-sm-6\">\n\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.Published' | transloco\"\n                  [label]=\"'Resource.Posts.Published' | transloco\"\n                  name=\"published_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"published_at\"\n                  name=\"published_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Accepted At -->\n\n            <div class=\"col-12 col-md-2 col-sm-6 accept-icon\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.AcceptedByAdmin' | transloco\"\n                  [label]=\"'Resource.Posts.AcceptedByAdmin' | transloco\"\n                  name=\"accepted_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"accepted_at\"\n                  name=\"accepted_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"submitted\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\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    <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)</small>\n    <pw-image-cropper #profile\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n\n<ng-template #rectContent let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n\n  <div class=\"modal-body\">\n    <small>\n      You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)\n    </small>\n\n\n    <pw-image-cropper\n      #profile\n      [aspectRatio]=\"'dynamic'\"\n      [dynamicData]=\"getAspectRatio()\"\n      (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".col-md-6.display-grid{display:grid}body .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container{width:100%}body .ui-inputtext{padding:0}.comment{border:1px solid rgb(238,238,238)}.is-invalid .ql-container.ql-snow,.is-invalid .ql-toolbar.ql-snow{border-color:#dc3545}.rec-img{max-width:100%;max-height:400px!important}.body-bg span .ui-autocomplete-multiple-container{background-color:#f5f7fa}.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token{color:var(--tabs_text)}.tags .info-circle .tooltiptext:after{left:25px!important}.tags .info-circle .tooltiptext{left:-30px!important}.accept-icon .info-circle .tooltiptext:after{left:110px!important}.accept-icon .info-circle .tooltiptext{right:-85px!important}\n"] }]
+            args: [{ selector: 'pw-resources-details-index', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"navigateToResourceList()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n         Add or edit resource\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Label.Title' | transloco\"\n              class=\"col-12\"\n              name=\"title\"\n              [errorMsg]=\"'Resource.Posts.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Resource.Posts.Body' | transloco\"\n              class=\"col-9 col-md-9 col-sm-12\"\n              name=\"body\"\n              [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '500px' }\"\n              class=\"quillEditor\" [modules]=\"editorConfig\"\n                formControlName=\"body\"\n                [ngClass]=\"{\n                  'w-100': true,\n                  'quill-container': true,\n                  'is-invalid': submitted && f['body'].errors\n                }\">\n              </quill-editor>\n            </pw-input-container>\n            <div class=\"col-12 col-md-3 col-sm-4 my-4\">\n              <div class=\"text-center mb-4\">\n                <label for=\"coverPicture\">{{ 'Resource.Posts.CoverPicture' | transloco }}</label>\n                <div class=\"text-center text-center d-flex flex-column align-items-center\">\n                  <img [src]=\"(image !== null && !image?.includes('default-photo.jpg') )? image : 'assets/img/resource/blog.png'\"\n                      (keydown.enter)=\"openModal(content)\"\n                      (click)=\"openModal(content)\"\n                      class=\"image w-100\" alt=\"Modal\"\n                      (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n                      <div class=\"d-flex justify-content-between align-items-center mt-2\">\n                        <a class=\"d-inline-block\" (click)=\"openModal(content)\">\n                          {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                        </a>\n                        <i\n                        class=\"fa fa-trash delete-icon text-danger ms-2\"\n                        title=\"Remove Image\"\n                        (click)=\"deleteCoverImage()\"\n                        (keydown.enter)=\"deleteCoverImage()\"\n                        style=\"cursor: pointer;\"\n                        *ngIf=\"image && !image.includes('default-photo.jpg')\">\n                        </i>\n                      </div>\n                </div>\n              </div>\n\n              <!-- Rectangular Picture -->\n              <div class=\"text-center d-flex flex-column align-items-center\">\n                <label for=\"rectangularPicture\">Rectangular Picture</label>\n                <img\n                  [src]=\"(rectangularImage !== null && !rectangularImage?.includes('default-photo.jpg')) ? rectangularImage : 'assets/img/resource/blog.png'\"\n                  (keydown.enter)=\"openRectModal(rectContent)\"\n                  (click)=\"openRectModal(rectContent)\"\n                  class=\"image rec-img\"\n                  [ngClass]=\"{ 'w-100': rectangularImage === null || rectangularImage?.includes('default-photo.jpg') }\"\n                  alt=\"Uploaded rectangular media preview\"\n                  (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n                  <div class=\"d-flex justify-content-between align-items-center mt-2\">\n                    <a class=\"d-inline-block\" (click)=\"openRectModal(rectContent)\">\n                      {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                    </a>\n                    <i\n                      class=\"fa fa-trash delete-icon text-danger ms-2\"\n                      title=\"Remove Image\"\n                      (click)=\"deleteRectangularImage()\"\n                      (keydown.enter)=\"deleteRectangularImage()\"\n                      style=\"cursor: pointer;\"\n                      *ngIf=\"rectangularImage && !rectangularImage.includes('default-photo.jpg')\">\n                    </i>\n                  </div>\n\n              </div>\n\n            </div>\n            <pw-input-container [label]=\"'Resource.Posts.CtaText' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n              name=\"cta_text\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"cta_text\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.ExternalUrl' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.ExternalUrl' | transloco\"\n              name=\"external_url\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"external_url\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['external_url'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.Tags' | transloco \" class=\"ui-fluid skills-modal col-12 col-md-4 col-sm-12 tags\"\n              [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\" name=\"cta_text\">\n              <p-autoComplete [(ngModel)]=\"selectedTags\" class=\"body-bg\" [suggestions]=\"tagsSuggestion\" dataKey=\"id\" field=\"name\"\n                (completeMethod)=\"search($event)\" styleClass=\"w-100\" [minLength]=\"1\" [maxlength]=\"10\" [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\" placeholder=\"Tags\" [multiple]=\"true\">\n              </p-autoComplete>\n            </pw-input-container>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Resource.Posts.When' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n                  name=\"when\">\n                  <div>\n                    <p-calendar formControlName=\"when\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Select Date'\"\n                      [ngClass]=\"{'is-invalid': submitted && f['when'].errors}\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.ShowCase' | transloco\"\n                  [label]=\"'Resource.Posts.ShowCase' | transloco\" name=\"showcase\">\n                  <ui-switch class=\"d-block\" formControlName=\"showcase\" name=\"showcase\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Published At -->\n            <div class=\"col-12 col-md-2 col-sm-6\">\n\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.Published' | transloco\"\n                  [label]=\"'Resource.Posts.Published' | transloco\"\n                  name=\"published_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"published_at\"\n                  name=\"published_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Accepted At -->\n\n            <div class=\"col-12 col-md-2 col-sm-6 accept-icon\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.AcceptedByAdmin' | transloco\"\n                  [label]=\"'Resource.Posts.AcceptedByAdmin' | transloco\"\n                  name=\"accepted_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"accepted_at\"\n                  name=\"accepted_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"navigateToResourceList()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"submitted\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\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    <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)</small>\n    <pw-image-cropper #profile\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n\n<ng-template #rectContent let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n\n  <div class=\"modal-body\">\n    <small>\n      You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)\n    </small>\n\n\n    <pw-image-cropper\n      #profile\n      [aspectRatio]=\"'dynamic'\"\n      [dynamicData]=\"getAspectRatio()\"\n      (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".col-md-6.display-grid{display:grid}body .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container{width:100%}body .ui-inputtext{padding:0}.comment{border:1px solid rgb(238,238,238)}.is-invalid .ql-container.ql-snow,.is-invalid .ql-toolbar.ql-snow{border-color:#dc3545}.rec-img{max-width:100%;max-height:400px!important}.body-bg span .ui-autocomplete-multiple-container{background-color:#f5f7fa}.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token{color:var(--tabs_text)}.tags .info-circle .tooltiptext:after{left:25px!important}.tags .info-circle .tooltiptext{left:-30px!important}.accept-icon .info-circle .tooltiptext:after{left:110px!important}.accept-icon .info-circle .tooltiptext{right:-85px!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i1.AdminService }, { type: i0.Injector }, { type: i1$2.TagService }], propDecorators: { onSave: [] } });
 
 class ResourcesAdminIndexComponent extends AppBaseComponent {
@@ -5618,6 +5743,7 @@ class ResourcesIndexComponent extends AppBaseComponent {
     }
     ngOnInit() {
         const state = history.state;
+        console.log('Bang Ner', state);
         if (state) {
             this.selectedTags = Array.isArray(state.selectedTags) ? state.selectedTags : [];
             this.searchTextItems =
@@ -5668,7 +5794,6 @@ class ResourcesIndexComponent extends AppBaseComponent {
         });
     }
     getPosts(paging) {
-        console.log(paging);
         this.isLoaded = false;
         if (this.subscriptionId) {
             this.adminService
@@ -5687,7 +5812,7 @@ class ResourcesIndexComponent extends AppBaseComponent {
             });
         }
     }
-    navigateToEdit(item) {
+    navigateToResourceDetails(item) {
         this.router.navigate(['/' + this.routers.posts + item.slug], {
             state: {
                 selectedTags: this.selectedTags,
@@ -5720,11 +5845,11 @@ class ResourcesIndexComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourcesIndexComponent, deps: [{ token: i1.AdminService }, { token: i1$2.TagService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourcesIndexComponent, 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-center\">\n    <h2 class=\"card-title p-0 float-start\">{{'Resource.Posts.Title' | transloco}}</h2>\n    <button *rbacAllow=\"blogPermission\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\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<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\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    <ng-template pTemplate=\"caption\">\n      <div class=\"search-filter\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect\n            [showToggleAll]=\"true\"\n            [options]=\"tagOptions\"\n            [(ngModel)]=\"selectedTags\"\n            (onChange)=\"onTagChange($event)\"\n            placeholder=\"Search by Tags\"\n            [showHeader]=\"true\"\n            maxSelectedLabels=\"2\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchTextItems\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search Resources...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            style=\"max-width: 90%\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Resource.Posts.Tags' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"showcase\">\n          {{ 'Resource.Posts.Showcase' | transloco }}\n          <p-sortIcon field=\"showcase\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"when\">\n          {{ 'Resource.Posts.When' | transloco }}\n          <p-sortIcon field=\"when\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"published_at\">\n          {{ 'Resource.Posts.PublishedAt' | transloco }}\n          <p-sortIcon field=\"published_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"accepted_at\">\n          {{ 'Resource.Posts.AcceptedAt' | transloco }}\n          <p-sortIcon field=\"accepted_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"view\">\n          {{ 'Resource.Posts.View' | transloco }}\n          <p-sortIcon field=\"view\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/members', item.author?.slug]\"\n            class=\"d-flex align-items-center\">\n            <img *ngIf=\"item.author?.avatar\"\n              [src]=\"item.author?.avatar[0].url\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\n            <img *ngIf=\"!item.author?.avatar\"\n              src=\"assets/img/icons/male.png\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\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          <span *ngFor=\"let tag of item?.tags?.slice(0, 3)\"\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 *ngIf=\"item.expandedTags\">\n            <span *ngFor=\"let tag of item?.tags?.slice(3)\"\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          </span>\n\n          <span *ngIf=\"item?.tags?.length > 3\" class=\"fw-bold\">\n            <a (click)=\"item.expandedTags = !item.expandedTags\">\n              <span>...</span>\n            </a>\n          </span>\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 ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"blogPermission\"\n              (click)=\"navigateToEdit(item)\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"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 ngbTooltip=\"Insight\"\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  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n  <div *ngIf=\"data.object_count === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\"  >\n    </pw-no-data>\n  </div>\n</div>\n<div class=\"col-12 text-center\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n    *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  </pw-no-data>\n</div>\n", dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i4$4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourcesIndexComponent, 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-center\">\n    <h2 class=\"card-title p-0 float-start\">{{'Resource.Posts.Title' | transloco}}</h2>\n    <button *rbacAllow=\"blogPermission\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\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<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\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    <ng-template pTemplate=\"caption\">\n      <div class=\"search-filter\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect\n            [showToggleAll]=\"true\"\n            [options]=\"tagOptions\"\n            [(ngModel)]=\"selectedTags\"\n            (onChange)=\"onTagChange($event)\"\n            placeholder=\"Search by Tags\"\n            [showHeader]=\"true\"\n            maxSelectedLabels=\"2\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchTextItems\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search Resources...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            style=\"max-width: 90%\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Resource.Posts.Tags' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"showcase\">\n          {{ 'Resource.Posts.Showcase' | transloco }}\n          <p-sortIcon field=\"showcase\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"when\">\n          {{ 'Resource.Posts.When' | transloco }}\n          <p-sortIcon field=\"when\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"published_at\">\n          {{ 'Resource.Posts.PublishedAt' | transloco }}\n          <p-sortIcon field=\"published_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"accepted_at\">\n          {{ 'Resource.Posts.AcceptedAt' | transloco }}\n          <p-sortIcon field=\"accepted_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"view\">\n          {{ 'Resource.Posts.View' | transloco }}\n          <p-sortIcon field=\"view\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/members', item.author?.slug]\"\n            class=\"d-flex align-items-center\">\n            <img *ngIf=\"item.author?.avatar\"\n              [src]=\"item.author?.avatar[0].url\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\n            <img *ngIf=\"!item.author?.avatar\"\n              src=\"assets/img/icons/male.png\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\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          <span *ngFor=\"let tag of item?.tags?.slice(0, 3)\"\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 *ngIf=\"item.expandedTags\">\n            <span *ngFor=\"let tag of item?.tags?.slice(3)\"\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          </span>\n\n          <span *ngIf=\"item?.tags?.length > 3\" class=\"fw-bold\">\n            <a (click)=\"item.expandedTags = !item.expandedTags\">\n              <span>...</span>\n            </a>\n          </span>\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 ngbTooltip=\"Edit\"\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 ngbTooltip=\"Delete\"\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 ngbTooltip=\"Insight\"\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  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n  <div *ngIf=\"data.object_count === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\"  >\n    </pw-no-data>\n  </div>\n</div>\n<div class=\"col-12 text-center\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n    *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  </pw-no-data>\n</div>\n", dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i4$4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourcesIndexComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-resources-index', template: "\n<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">{{'Resource.Posts.Title' | transloco}}</h2>\n    <button *rbacAllow=\"blogPermission\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\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<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\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    <ng-template pTemplate=\"caption\">\n      <div class=\"search-filter\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect\n            [showToggleAll]=\"true\"\n            [options]=\"tagOptions\"\n            [(ngModel)]=\"selectedTags\"\n            (onChange)=\"onTagChange($event)\"\n            placeholder=\"Search by Tags\"\n            [showHeader]=\"true\"\n            maxSelectedLabels=\"2\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchTextItems\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search Resources...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            style=\"max-width: 90%\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Resource.Posts.Tags' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"showcase\">\n          {{ 'Resource.Posts.Showcase' | transloco }}\n          <p-sortIcon field=\"showcase\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"when\">\n          {{ 'Resource.Posts.When' | transloco }}\n          <p-sortIcon field=\"when\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"published_at\">\n          {{ 'Resource.Posts.PublishedAt' | transloco }}\n          <p-sortIcon field=\"published_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"accepted_at\">\n          {{ 'Resource.Posts.AcceptedAt' | transloco }}\n          <p-sortIcon field=\"accepted_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"view\">\n          {{ 'Resource.Posts.View' | transloco }}\n          <p-sortIcon field=\"view\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/members', item.author?.slug]\"\n            class=\"d-flex align-items-center\">\n            <img *ngIf=\"item.author?.avatar\"\n              [src]=\"item.author?.avatar[0].url\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\n            <img *ngIf=\"!item.author?.avatar\"\n              src=\"assets/img/icons/male.png\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\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          <span *ngFor=\"let tag of item?.tags?.slice(0, 3)\"\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 *ngIf=\"item.expandedTags\">\n            <span *ngFor=\"let tag of item?.tags?.slice(3)\"\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          </span>\n\n          <span *ngIf=\"item?.tags?.length > 3\" class=\"fw-bold\">\n            <a (click)=\"item.expandedTags = !item.expandedTags\">\n              <span>...</span>\n            </a>\n          </span>\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 ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"blogPermission\"\n              (click)=\"navigateToEdit(item)\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"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 ngbTooltip=\"Insight\"\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  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n  <div *ngIf=\"data.object_count === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\"  >\n    </pw-no-data>\n  </div>\n</div>\n<div class=\"col-12 text-center\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n    *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  </pw-no-data>\n</div>\n" }]
+            args: [{ selector: 'pw-resources-index', template: "\n<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">{{'Resource.Posts.Title' | transloco}}</h2>\n    <button *rbacAllow=\"blogPermission\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\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<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\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    <ng-template pTemplate=\"caption\">\n      <div class=\"search-filter\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect\n            [showToggleAll]=\"true\"\n            [options]=\"tagOptions\"\n            [(ngModel)]=\"selectedTags\"\n            (onChange)=\"onTagChange($event)\"\n            placeholder=\"Search by Tags\"\n            [showHeader]=\"true\"\n            maxSelectedLabels=\"2\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchTextItems\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search Resources...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            style=\"max-width: 90%\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Resource.Posts.Tags' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"showcase\">\n          {{ 'Resource.Posts.Showcase' | transloco }}\n          <p-sortIcon field=\"showcase\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"when\">\n          {{ 'Resource.Posts.When' | transloco }}\n          <p-sortIcon field=\"when\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"published_at\">\n          {{ 'Resource.Posts.PublishedAt' | transloco }}\n          <p-sortIcon field=\"published_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"accepted_at\">\n          {{ 'Resource.Posts.AcceptedAt' | transloco }}\n          <p-sortIcon field=\"accepted_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"view\">\n          {{ 'Resource.Posts.View' | transloco }}\n          <p-sortIcon field=\"view\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/members', item.author?.slug]\"\n            class=\"d-flex align-items-center\">\n            <img *ngIf=\"item.author?.avatar\"\n              [src]=\"item.author?.avatar[0].url\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\n            <img *ngIf=\"!item.author?.avatar\"\n              src=\"assets/img/icons/male.png\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\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          <span *ngFor=\"let tag of item?.tags?.slice(0, 3)\"\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 *ngIf=\"item.expandedTags\">\n            <span *ngFor=\"let tag of item?.tags?.slice(3)\"\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          </span>\n\n          <span *ngIf=\"item?.tags?.length > 3\" class=\"fw-bold\">\n            <a (click)=\"item.expandedTags = !item.expandedTags\">\n              <span>...</span>\n            </a>\n          </span>\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 ngbTooltip=\"Edit\"\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 ngbTooltip=\"Delete\"\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 ngbTooltip=\"Insight\"\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  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n  <div *ngIf=\"data.object_count === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\"  >\n    </pw-no-data>\n  </div>\n</div>\n<div class=\"col-12 text-center\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n    *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i1$2.TagService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 
 class ResourcesInsightComponent extends AppBaseComponent {
@@ -5851,7 +5976,7 @@ class AgentDetailsComponent extends AppBaseComponent {
                 month: Number(endDate.substring(5, 7)),
                 day: Number(endDate.substring(8, 10))
             };
-            response.subscription_agent.user.displayName = `${res?.user?.first_name} ${res?.user?.last_name || ''} ${res?.user?.email}`.trim();
+            response.subscription_agent.user.displayName = `${res?.user?.first_name} ${res?.user?.last_name ?? ''} ${res?.user?.email}`.trim();
             this.agentDetails = response.subscription_agent;
             this.form.patchValue(response.subscription_agent);
             this.form.patchValue({ end_date: dobObject });
@@ -5882,8 +6007,8 @@ class AgentDetailsComponent extends AppBaseComponent {
             .subscribe(response => {
             this.allUsers = response.users;
             this.allUsers.forEach(member => {
-                const firstName = member.first_name || '';
-                const lastName = member.last_name || '';
+                const firstName = member.first_name ?? '';
+                const lastName = member.last_name ?? '';
                 member.displayName = `${firstName} ${lastName} ${member.email}`.trim();
             });
         });
@@ -5950,7 +6075,7 @@ class SubscriptionProductsComponent extends AppBaseComponent {
         this.subscriptionService
             .getById(this.id)
             .subscribe(response => {
-            this.subscriptionProducts = response?.products || [];
+            this.subscriptionProducts = response?.products ?? [];
             this.totalRecords = response?.products?.length;
             this.totalRecordsUnFiltered = response.unfiltered_count;
         })
@@ -5994,6 +6119,9 @@ class AddMembersComponent extends AppBaseComponent {
             this.getSubscriptionDetails();
         });
     }
+    get emailsFormArrayElements() {
+        return this.form.get('emailsFormArray');
+    }
     createItem() {
         return this.formBuilder.group({
             email: ['', [Validators.email, Validators.required]]
@@ -6091,7 +6219,7 @@ class AddMembersComponent extends AppBaseComponent {
                         if (response?.status === StatusCodes.OK) {
                             this.membersAdded.emit();
                             this.toast.success(response.message);
-                            this.form.reset();
+                            this.form.setControl('emailsFormArray', this.formBuilder.array([this.createItem()]));
                         }
                         else {
                             this.toast.error(response.error.message);
@@ -6105,14 +6233,20 @@ class AddMembersComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AddMembersComponent, deps: [{ token: i0.Injector }, { token: i3$2.UntypedFormBuilder }, { token: i1$2.SubscriptionService }, { token: i1$2.AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AddMembersComponent, selector: "pw-add-members", outputs: { membersAdded: "membersAdded" }, usesInheritance: true, ngImport: i0, template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <div class=\"title d-flex\">\n        <a\n          aria-label=\"Navigate to Target\"\n          (click)=\"membersAdded.emit()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h2 class=\"mt-3\">Enterprise Members for this subscription</h2>\n      </div>\n      <p>Here you can add members to your subscription</p>\n    </div>\n  </div>\n</section>\n\n<section>\n  <h5 class=\"ms-2 pt-3\">Upload File (CSV)</h5>\n  <div class=\"row p-2\">\n    <div class=\"col-12\">\n      <div class=\"upload-box\">\n        <div class=\"upload-box-content\">\n          <div class=\"drop-container\"\n            ngFileDrop\n            [options]=\"options\"\n            (uploadOutput)=\"onUploadOutput($event)\"\n            [uploadInput]=\"uploadInput\">\n            <p>\n              Drag files here or\n              <label class=\"upload-button\">\n                <input type=\"file\"\n                  ngFileSelect\n                  [options]=\"options\"\n                  (uploadOutput)=\"onUploadOutput($event)\"\n                  [uploadInput]=\"uploadInput\"\n                  multiple />\n                browse\n              </label>\n              to upload.\n            </p>\n          </div>\n          <div class=\"upload-item\"\n            *ngFor=\"let f of files; let i = index\">\n            <div class=\"upload-item-content\">\n              <div class=\"filename\">\n                <div class=\"filename-left\">\n                  <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n                  <span>{{ f.name }}</span>\n                </div>\n              </div>\n              <div class=\"progress-content\">\n                <div class=\"progress\">\n                  <span class=\"bar\"\n                    [style.width]=\"f?.progress?.data?.percentage + '%'\"\n                    [class.is-done]=\"f?.progress?.data?.percentage === 100\"></span>\n                </div>\n              </div>\n              <div class=\"progress-text-content\">\n                <span class=\"progress-text\"\n                  [class.is-done]=\"f?.progress?.data?.percentage === 100\">\n                  <span>{{ f.progress?.data?.percentage }}% </span>\n                  <span *ngIf=\"f.progress?.data?.percentage !== 100\">Uploading...</span>\n                  <span *ngIf=\"f.progress?.data?.percentage === 100\">Done</span>\n                </span>\n                <span class=\"speed-and-eta-text\"\n                  *ngIf=\"\n                                        f.progress?.data?.percentage !== 0 &&\n                                        f.progress?.data?.percentage !== 100\n                                    \">\n                  <span>{{ f.progress?.data?.speedHuman }} </span>\n                  <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                </span>\n              </div>\n            </div>\n          </div>\n          <div class=\"help-text\">\n            <span>Note: You can upload a .csv file containing the comma separated emails\n              of the members to add.</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <h5 class=\"ms-2 pt-3 d-inline-block me-2\">Add Member's Email</h5>\n  <small><strong> (Available {{ availableUnits }} Seats) </strong></small>\n  <div class=\"p-2\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSignUpMember()\">\n      <div formArrayName=\"emailsFormArray\"\n        *ngFor=\"\n                    let item of form.get('emailsFormArray')['controls'];\n                    let i = index;\n                    let last = last\n                \">\n        <div [formGroupName]=\"i\">\n          <div class=\"row mb-2\">\n            <label class=\"col-12 col-md-4 text-md-end col-form-label col-form-label-sm\" for=\"Email\">\n              #{{ i + 1 }}</label>\n            <div class=\"col-10 col-md-4\">\n              <input formControlName=\"email\"\n                class=\"form-control form-control-sm\"\n                placeholder=\"Email\" />\n            </div>\n            <div class=\"col-2\">\n              <button class=\"btn btn-sm btn-danger\"\n                type=\"button\">\n                <i\n                                class=\"fa fa-times\"\n                                title=\"Delete\"\n                                (click)=\"removeItem(i)\"\n                                (keydown.enter)=\"removeItem(i)\"\n                                aria-hidden=\"true\"\n                            ></i>\n              </button>\n              <i\n                                class=\"btn btn-sm btn-primary fal fa-plus ms-2\"\n                                *ngIf=\"last && emailsFormArray?.controls?.length < availableUnits\"\n                                title=\"Add More\"\n                                (click)=\"addItem()\"\n                                (keydown.enter)=\"addItem()\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"text-center mt-2\">\n        <button class=\"btn btn-sm btn-outline-default me-2\"\n        (click)=\"membersAdded.emit()\">\n          <i class=\"fa fa-plus-times\" aria-hidden=\"true\"></i>\n          {{ 'Button.Back' | transloco }}\n        </button>\n        <button type=\"submit\"\n          class=\"btn btn-sm btn-outline-primary me-2\"\n          [buttonBusy]=\"buttonBusy\"\n          [disabled]=\"form.invalid || buttonBusy\">\n          Add Members\n        </button>\n      </div>\n    </form>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i3$5.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i3$5.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AddMembersComponent, selector: "pw-add-members", outputs: { membersAdded: "membersAdded" }, usesInheritance: true, ngImport: i0, template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <div class=\"title d-flex\">\n        <a\n          aria-label=\"Navigate to Target\"\n          (click)=\"membersAdded.emit()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h2 class=\"mt-3\">Enterprise Members for this subscription</h2>\n      </div>\n      <p>Here you can add members to your subscription</p>\n    </div>\n  </div>\n</section>\n\n<section>\n  <h5 class=\"ms-2 pt-3\">Upload File (CSV)</h5>\n  <div class=\"row p-2\">\n    <div class=\"col-12\">\n      <div class=\"upload-box\">\n        <div class=\"upload-box-content\">\n          <div class=\"drop-container\"\n            ngFileDrop\n            [options]=\"options\"\n            (uploadOutput)=\"onUploadOutput($event)\"\n            [uploadInput]=\"uploadInput\">\n            <p>\n              Drag files here or\n              <label class=\"upload-button\">\n                <input type=\"file\"\n                  ngFileSelect\n                  accept=\".csv\"\n                  [options]=\"options\"\n                  (uploadOutput)=\"onUploadOutput($event)\"\n                  [uploadInput]=\"uploadInput\"\n                  multiple />\n                browse\n              </label>\n              to upload.\n            </p>\n          </div>\n          <div class=\"upload-item\"\n            *ngFor=\"let f of files; let i = index\">\n            <div class=\"upload-item-content\">\n              <div class=\"filename\">\n                <div class=\"filename-left\">\n                  <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n                  <span>{{ f.name }}</span>\n                </div>\n              </div>\n              <div class=\"progress-content\">\n                <div class=\"progress\">\n                  <span class=\"bar\"\n                    [style.width]=\"f?.progress?.data?.percentage + '%'\"\n                    [class.is-done]=\"f?.progress?.data?.percentage === 100\"></span>\n                </div>\n              </div>\n              <div class=\"progress-text-content\">\n                <span class=\"progress-text\"\n                  [class.is-done]=\"f?.progress?.data?.percentage === 100\">\n                  <span>{{ f.progress?.data?.percentage }}% </span>\n                  <span *ngIf=\"f.progress?.data?.percentage !== 100\">Uploading...</span>\n                  <span *ngIf=\"f.progress?.data?.percentage === 100\">Done</span>\n                </span>\n                <span class=\"speed-and-eta-text\"\n                  *ngIf=\"\n                                        f.progress?.data?.percentage !== 0 &&\n                                        f.progress?.data?.percentage !== 100\n                                    \">\n                  <span>{{ f.progress?.data?.speedHuman }} </span>\n                  <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                </span>\n              </div>\n            </div>\n          </div>\n          <div class=\"help-text\">\n            <span>Note: You can upload a .csv file containing the comma separated emails\n              of the members to add.</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <h5 class=\"ms-2 pt-3 d-inline-block me-2\">Add Member's Email</h5>\n  <small><strong> (Available {{ availableUnits }} Seats) </strong></small>\n  <div class=\"p-2\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSignUpMember()\">\n      <div formArrayName=\"emailsFormArray\"\n        *ngFor=\"\n                    let item of emailsFormArrayElements.controls\n                    let i = index;\n                    let last = last\n                \">\n        <div [formGroupName]=\"i\">\n          <div class=\"row mb-2\">\n            <label class=\"col-12 col-md-4 text-md-end col-form-label col-form-label-sm\" for=\"Email\">\n              #{{ i + 1 }}</label>\n            <div class=\"col-10 col-md-4\">\n              <input formControlName=\"email\"\n                class=\"form-control form-control-sm\"\n                placeholder=\"Email\" />\n            </div>\n            <div class=\"col-2\">\n              <button class=\"btn btn-sm btn-danger\"\n                type=\"button\">\n                <i\n                                class=\"fa fa-times\"\n                                title=\"Delete\"\n                                (click)=\"removeItem(i)\"\n                                (keydown.enter)=\"removeItem(i)\"\n                                aria-hidden=\"true\"\n                            ></i>\n              </button>\n              <i\n                                class=\"btn btn-sm btn-primary fal fa-plus ms-2\"\n                                *ngIf=\"last && emailsFormArray?.controls?.length < availableUnits\"\n                                title=\"Add More\"\n                                (click)=\"addItem()\"\n                                (keydown.enter)=\"addItem()\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"text-center mt-2\">\n        <button class=\"btn btn-sm btn-outline-default me-2\"\n        (click)=\"membersAdded.emit()\">\n          <i class=\"fa fa-plus-times\" aria-hidden=\"true\" aria-label=\"Go Back\"></i>\n          {{ 'Button.Back' | transloco }}\n        </button>\n        <button type=\"submit\"\n          class=\"btn btn-sm btn-outline-primary me-2\"\n          [buttonBusy]=\"buttonBusy\"\n          [disabled]=\"form.invalid || buttonBusy\">\n          Add Members\n        </button>\n      </div>\n    </form>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i3$5.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i3$5.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
+__decorate([
+    ValidateForm('form'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], AddMembersComponent.prototype, "onSignUpMember", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AddMembersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-add-members', template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <div class=\"title d-flex\">\n        <a\n          aria-label=\"Navigate to Target\"\n          (click)=\"membersAdded.emit()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h2 class=\"mt-3\">Enterprise Members for this subscription</h2>\n      </div>\n      <p>Here you can add members to your subscription</p>\n    </div>\n  </div>\n</section>\n\n<section>\n  <h5 class=\"ms-2 pt-3\">Upload File (CSV)</h5>\n  <div class=\"row p-2\">\n    <div class=\"col-12\">\n      <div class=\"upload-box\">\n        <div class=\"upload-box-content\">\n          <div class=\"drop-container\"\n            ngFileDrop\n            [options]=\"options\"\n            (uploadOutput)=\"onUploadOutput($event)\"\n            [uploadInput]=\"uploadInput\">\n            <p>\n              Drag files here or\n              <label class=\"upload-button\">\n                <input type=\"file\"\n                  ngFileSelect\n                  [options]=\"options\"\n                  (uploadOutput)=\"onUploadOutput($event)\"\n                  [uploadInput]=\"uploadInput\"\n                  multiple />\n                browse\n              </label>\n              to upload.\n            </p>\n          </div>\n          <div class=\"upload-item\"\n            *ngFor=\"let f of files; let i = index\">\n            <div class=\"upload-item-content\">\n              <div class=\"filename\">\n                <div class=\"filename-left\">\n                  <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n                  <span>{{ f.name }}</span>\n                </div>\n              </div>\n              <div class=\"progress-content\">\n                <div class=\"progress\">\n                  <span class=\"bar\"\n                    [style.width]=\"f?.progress?.data?.percentage + '%'\"\n                    [class.is-done]=\"f?.progress?.data?.percentage === 100\"></span>\n                </div>\n              </div>\n              <div class=\"progress-text-content\">\n                <span class=\"progress-text\"\n                  [class.is-done]=\"f?.progress?.data?.percentage === 100\">\n                  <span>{{ f.progress?.data?.percentage }}% </span>\n                  <span *ngIf=\"f.progress?.data?.percentage !== 100\">Uploading...</span>\n                  <span *ngIf=\"f.progress?.data?.percentage === 100\">Done</span>\n                </span>\n                <span class=\"speed-and-eta-text\"\n                  *ngIf=\"\n                                        f.progress?.data?.percentage !== 0 &&\n                                        f.progress?.data?.percentage !== 100\n                                    \">\n                  <span>{{ f.progress?.data?.speedHuman }} </span>\n                  <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                </span>\n              </div>\n            </div>\n          </div>\n          <div class=\"help-text\">\n            <span>Note: You can upload a .csv file containing the comma separated emails\n              of the members to add.</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <h5 class=\"ms-2 pt-3 d-inline-block me-2\">Add Member's Email</h5>\n  <small><strong> (Available {{ availableUnits }} Seats) </strong></small>\n  <div class=\"p-2\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSignUpMember()\">\n      <div formArrayName=\"emailsFormArray\"\n        *ngFor=\"\n                    let item of form.get('emailsFormArray')['controls'];\n                    let i = index;\n                    let last = last\n                \">\n        <div [formGroupName]=\"i\">\n          <div class=\"row mb-2\">\n            <label class=\"col-12 col-md-4 text-md-end col-form-label col-form-label-sm\" for=\"Email\">\n              #{{ i + 1 }}</label>\n            <div class=\"col-10 col-md-4\">\n              <input formControlName=\"email\"\n                class=\"form-control form-control-sm\"\n                placeholder=\"Email\" />\n            </div>\n            <div class=\"col-2\">\n              <button class=\"btn btn-sm btn-danger\"\n                type=\"button\">\n                <i\n                                class=\"fa fa-times\"\n                                title=\"Delete\"\n                                (click)=\"removeItem(i)\"\n                                (keydown.enter)=\"removeItem(i)\"\n                                aria-hidden=\"true\"\n                            ></i>\n              </button>\n              <i\n                                class=\"btn btn-sm btn-primary fal fa-plus ms-2\"\n                                *ngIf=\"last && emailsFormArray?.controls?.length < availableUnits\"\n                                title=\"Add More\"\n                                (click)=\"addItem()\"\n                                (keydown.enter)=\"addItem()\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"text-center mt-2\">\n        <button class=\"btn btn-sm btn-outline-default me-2\"\n        (click)=\"membersAdded.emit()\">\n          <i class=\"fa fa-plus-times\" aria-hidden=\"true\"></i>\n          {{ 'Button.Back' | transloco }}\n        </button>\n        <button type=\"submit\"\n          class=\"btn btn-sm btn-outline-primary me-2\"\n          [buttonBusy]=\"buttonBusy\"\n          [disabled]=\"form.invalid || buttonBusy\">\n          Add Members\n        </button>\n      </div>\n    </form>\n  </div>\n</section>\n" }]
+            args: [{ selector: 'pw-add-members', template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <div class=\"title d-flex\">\n        <a\n          aria-label=\"Navigate to Target\"\n          (click)=\"membersAdded.emit()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h2 class=\"mt-3\">Enterprise Members for this subscription</h2>\n      </div>\n      <p>Here you can add members to your subscription</p>\n    </div>\n  </div>\n</section>\n\n<section>\n  <h5 class=\"ms-2 pt-3\">Upload File (CSV)</h5>\n  <div class=\"row p-2\">\n    <div class=\"col-12\">\n      <div class=\"upload-box\">\n        <div class=\"upload-box-content\">\n          <div class=\"drop-container\"\n            ngFileDrop\n            [options]=\"options\"\n            (uploadOutput)=\"onUploadOutput($event)\"\n            [uploadInput]=\"uploadInput\">\n            <p>\n              Drag files here or\n              <label class=\"upload-button\">\n                <input type=\"file\"\n                  ngFileSelect\n                  accept=\".csv\"\n                  [options]=\"options\"\n                  (uploadOutput)=\"onUploadOutput($event)\"\n                  [uploadInput]=\"uploadInput\"\n                  multiple />\n                browse\n              </label>\n              to upload.\n            </p>\n          </div>\n          <div class=\"upload-item\"\n            *ngFor=\"let f of files; let i = index\">\n            <div class=\"upload-item-content\">\n              <div class=\"filename\">\n                <div class=\"filename-left\">\n                  <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n                  <span>{{ f.name }}</span>\n                </div>\n              </div>\n              <div class=\"progress-content\">\n                <div class=\"progress\">\n                  <span class=\"bar\"\n                    [style.width]=\"f?.progress?.data?.percentage + '%'\"\n                    [class.is-done]=\"f?.progress?.data?.percentage === 100\"></span>\n                </div>\n              </div>\n              <div class=\"progress-text-content\">\n                <span class=\"progress-text\"\n                  [class.is-done]=\"f?.progress?.data?.percentage === 100\">\n                  <span>{{ f.progress?.data?.percentage }}% </span>\n                  <span *ngIf=\"f.progress?.data?.percentage !== 100\">Uploading...</span>\n                  <span *ngIf=\"f.progress?.data?.percentage === 100\">Done</span>\n                </span>\n                <span class=\"speed-and-eta-text\"\n                  *ngIf=\"\n                                        f.progress?.data?.percentage !== 0 &&\n                                        f.progress?.data?.percentage !== 100\n                                    \">\n                  <span>{{ f.progress?.data?.speedHuman }} </span>\n                  <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                </span>\n              </div>\n            </div>\n          </div>\n          <div class=\"help-text\">\n            <span>Note: You can upload a .csv file containing the comma separated emails\n              of the members to add.</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <h5 class=\"ms-2 pt-3 d-inline-block me-2\">Add Member's Email</h5>\n  <small><strong> (Available {{ availableUnits }} Seats) </strong></small>\n  <div class=\"p-2\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSignUpMember()\">\n      <div formArrayName=\"emailsFormArray\"\n        *ngFor=\"\n                    let item of emailsFormArrayElements.controls\n                    let i = index;\n                    let last = last\n                \">\n        <div [formGroupName]=\"i\">\n          <div class=\"row mb-2\">\n            <label class=\"col-12 col-md-4 text-md-end col-form-label col-form-label-sm\" for=\"Email\">\n              #{{ i + 1 }}</label>\n            <div class=\"col-10 col-md-4\">\n              <input formControlName=\"email\"\n                class=\"form-control form-control-sm\"\n                placeholder=\"Email\" />\n            </div>\n            <div class=\"col-2\">\n              <button class=\"btn btn-sm btn-danger\"\n                type=\"button\">\n                <i\n                                class=\"fa fa-times\"\n                                title=\"Delete\"\n                                (click)=\"removeItem(i)\"\n                                (keydown.enter)=\"removeItem(i)\"\n                                aria-hidden=\"true\"\n                            ></i>\n              </button>\n              <i\n                                class=\"btn btn-sm btn-primary fal fa-plus ms-2\"\n                                *ngIf=\"last && emailsFormArray?.controls?.length < availableUnits\"\n                                title=\"Add More\"\n                                (click)=\"addItem()\"\n                                (keydown.enter)=\"addItem()\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"text-center mt-2\">\n        <button class=\"btn btn-sm btn-outline-default me-2\"\n        (click)=\"membersAdded.emit()\">\n          <i class=\"fa fa-plus-times\" aria-hidden=\"true\" aria-label=\"Go Back\"></i>\n          {{ 'Button.Back' | transloco }}\n        </button>\n        <button type=\"submit\"\n          class=\"btn btn-sm btn-outline-primary me-2\"\n          [buttonBusy]=\"buttonBusy\"\n          [disabled]=\"form.invalid || buttonBusy\">\n          Add Members\n        </button>\n      </div>\n    </form>\n  </div>\n</section>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i3$2.UntypedFormBuilder }, { type: i1$2.SubscriptionService }, { type: i1$2.AuthService }], propDecorators: { membersAdded: [{
                 type: Output
-            }] } });
+            }], onSignUpMember: [] } });
 
 class SubscriptionUsersComponent extends AppBaseComponent {
     constructor(subscriptionService, injector, cdr, authService, windowService, adminService, toaster) {
@@ -6131,6 +6265,7 @@ class SubscriptionUsersComponent extends AppBaseComponent {
         this.totalUnfilteredCount = 0;
         this.hasAccess = false;
         this.isAddEnabled = false;
+        this.isUserSubscriptionSuperAdmin = this.permissionService.isUserSubscriptionSuperAdmin();
     }
     ngOnInit() {
         this.subscriptionId = PermissionService.selectedSubscription?.id;
@@ -6157,6 +6292,33 @@ class SubscriptionUsersComponent extends AppBaseComponent {
             search: this.searchText
         });
     }
+    makeAdmin(user, value) {
+        swal.fire({
+            title: value === true ? 'Make Admin' : 'Remove Admin',
+            text: value === true
+                ? `This user will now have full access to your subscription. Read more in FAQ.`
+                : `Are you sure?`,
+            showCancelButton: true,
+            reverseButtons: true,
+            icon: 'warning'
+        }).then(rep => {
+            if (rep.value) {
+                const data = {
+                    user_id: user.id,
+                    is_admin: value
+                };
+                this.subscriptionService.toggleAdmin(this.id, data).subscribe(response => {
+                    if (response.status === StatusCodes.OK) {
+                        this.toast.success(response.message);
+                    }
+                    this.getSubscriptionDetails({
+                        page: this.page,
+                        page_size: PAGE_SIZE
+                    });
+                });
+            }
+        });
+    }
     onImpersonate(user) {
         this.userToImpersonate = user;
         this.passwordValidationModalForImpersonate.open();
@@ -6236,14 +6398,15 @@ class SubscriptionUsersComponent extends AppBaseComponent {
         this.subscriptionService
             .getEnrolledSubscription(this.id, paging)
             .subscribe(response => {
-            this.subscriptionMembers = response?.members || [];
+            this.subscriptionMembers = response?.members ?? [];
+            this.subscriptionAdmins = response?.admins ?? [];
             this.subscriptionOwnerUserId = response?.owner_id;
             this.totalRecords = response?.members.length;
             this.totalUnfilteredCount = response.unfiltered_count;
-            this.hasAccess =
-                response?.admins?.includes(this.user?.id) ||
-                    this.user?.id === this.subscriptionOwnerUserId ||
-                    this.permissionService.isSuperAdmin();
+            const isAdmin = response?.admins?.includes(this.user?.id) ?? false;
+            const isOwner = this.user?.id === this.subscriptionOwnerUserId;
+            const isSuperAdmin = this.permissionService.isSuperAdmin();
+            this.hasAccess = [isAdmin, isOwner, isSuperAdmin].some(Boolean);
         })
             .add(() => {
             this.isLoaded = true;
@@ -6251,11 +6414,11 @@ class SubscriptionUsersComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionUsersComponent, deps: [{ token: i1$2.SubscriptionService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$2.AuthService }, { token: i1$2.WindowService }, { token: i1.AdminService }, { token: i1$2.CustomToastService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionUsersComponent, selector: "pw-subscription-users", viewQueries: [{ propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }, { propertyName: "passwordValidationModalForUserDelete", first: true, predicate: ["passwordValidationModalForUserDelete"], descendants: true }, { propertyName: "passwordValidationModalForRemove2fa", first: true, predicate: ["passwordValidationModalForRemove2fa"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n\t<ng-template [ngIf]=\"!isLoaded\">\n\t\t<p-progressSpinner></p-progressSpinner>\n\t</ng-template>\n</div>\n<div class=\"text-end mb-2\" *ngIf=\"hasAccess && !isAddEnabled\">\n\t<button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n\t  <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n\t</button>\n  </div>\n  <section id=\"members\"\n  *ngIf=\"!isAddEnabled\">\n<div [class.hideTable]=\"totalUnfilteredCount === 0\"\n\tclass=\"primeng-datatable-container table-responsive mt-0\">\n\t<p-table #dt\n\t\t[value]=\"subscriptionMembers\"\n\t\t[paginator]=\"totalRecords !== 0\"\n\t\t[rows]=\"PAGE_SIZE\"\n\t\t[lazy]=\"true\"\n\t\t[totalRecords]=\"totalRecords\"\n\t\t[loading]=\"loading\"\n\t\t[filterDelay]=\"1000\"\n\t\t[customSort]=\"true\"\n\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t<ng-template pTemplate=\"caption\">\n\t\t\t<div class=\"text-end\">\n\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t(input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tpInputText\n\t\t\t\t\tsize=\"50\"\n\t\t\t\t\tplaceholder=\"Search subscription users...\"\n\t\t\t\t\tclass=\"mw-90\">\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"header\">\n\t\t\t<tr>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"id\">\n\t\t\t\t\t{{ 'Admin.Users.Id' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"id\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"first_name\">\n\t\t\t\t\t{{ 'Label.FirstName' | transloco }}\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_name\">\n\t\t\t\t\t{{ 'Label.LastName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_name\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"email\">\n\t\t\t\t\t{{ 'Label.Email' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"email\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"slug\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.NickName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"slug\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"has_password\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"has_password\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_sign_in_at\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.LastLogin' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"body\"\n\t\t\tlet-user>\n\t\t\t<tr>\n\t\t\t\t<td data-head=\"Id\">{{ user.id }}</td>\n\t\t\t\t<td data-head=\"First Name\">\n\t\t\t\t\t<span class=\"first-name\">{{ user.first_name }}</span>\n\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId === user.id\">\n\t\t\t\t\t\t<span *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Subscription Owner\">\n\t\t\t\t\t\t\t<i class=\"info-icon fas fa-user-tie success\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Name\">\n\t\t\t\t\t{{ user.last_name }}\n\t\t\t\t\t<span *ngIf=\"user?.alpha\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.beta\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.cognito_sso_activated\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa fa-cloud success\" ></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email\">{{ user.email }}</td>\n\t\t\t\t<td data-head=\"Nick Name\">\n\t\t\t\t\t<a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email Confirm\">\n\t\t\t\t\t<span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n\t\t\t\t\t\tcolor=\"success-danger\"\n\t\t\t\t\t\tclass=\"badge\">\n\t\t\t\t\t\t{{ user?.has_password ? 'Yes' : 'No' }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.blocked\"\n\t\t\t\t\t\t[pTooltip]=\"'This user has been blocked'\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Login\">\n\t\t\t\t\t<span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{{ user.current_sign_in_at | dateFormat }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span *ngIf=\"user.current_sign_in_at\">\n\t\t\t\t\t\t\t&nbsp;({{ user.current_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<ng-template #lastSignin>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t{{ user.last_sign_in_at | dateFormat }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span *ngIf=\"user.last_sign_in_at\">\n\t\t\t\t\t\t\t\t&nbsp;({{ user.last_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t<ul class=\"list-unstyled list-inline list-action\">\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t<i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\"  class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId !== user.id\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Set this user as new owner\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t\t<i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\"  class=\"fa fa-user-crown warning fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\"\n\t\t\t\t\t\t\t\t(click)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\tngbTooltip=\"Disable 2FA\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-3 success\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-lock\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<li [routerLink]=\"[routers.usersDetails + user.id]\"\n\t\t\t\t\t\t\tngbTooltip=\"Edit\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i class=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n\t\t\t\t\t\t\tngbTooltip=\"Delete\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i (click)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</ng-template>\n\t</p-table>\n\t<div *ngIf=\"totalRecords === 0 && totalUnfilteredCount !== 0\">\n\t\t<pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n\t\t</pw-no-data>\n\t</div>\n\t<span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">\n\t\t{{ 'Label.Total' | transloco }}: {{ totalRecords }}\n\t</span>\n</div>\n<div *ngIf=\"totalUnfilteredCount === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n\n</section>\n\n\n<section id=\"manage-members\"\n  *ngIf=\"isAddEnabled\">\n  <pw-add-members (membersAdded)=\"onMembersAdded()\"\n  ></pw-add-members>\n</section>\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n\t(successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n\t(successEvent)=\"deleteUser($event)\">\n\t<div class=\"row\">\n\t\t<div class=\"col-12\">\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ConfirmPassword' | transloco }}\n\t\t\t</p>\n\t\t</div>\n\t</div>\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n\t(successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: AddMembersComponent, selector: "pw-add-members", outputs: ["membersAdded"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.SinceAgoPipe, name: "sinceAgo" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionUsersComponent, selector: "pw-subscription-users", viewQueries: [{ propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }, { propertyName: "passwordValidationModalForUserDelete", first: true, predicate: ["passwordValidationModalForUserDelete"], descendants: true }, { propertyName: "passwordValidationModalForRemove2fa", first: true, predicate: ["passwordValidationModalForRemove2fa"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n\t<ng-template [ngIf]=\"!isLoaded\">\n\t\t<p-progressSpinner></p-progressSpinner>\n\t</ng-template>\n</div>\n<div class=\"text-end mb-2\" *ngIf=\"!isAddEnabled && isUserSubscriptionSuperAdmin\">\n\t<button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n\t  <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n\t</button>\n  </div>\n  <section id=\"members\"\n  *ngIf=\"!isAddEnabled\">\n<div [class.hideTable]=\"totalUnfilteredCount === 0\"\n\tclass=\"primeng-datatable-container table-responsive mt-0\">\n\t<p-table #dt\n\t\t[value]=\"subscriptionMembers\"\n\t\t[paginator]=\"totalRecords !== 0\"\n\t\t[rows]=\"PAGE_SIZE\"\n\t\t[lazy]=\"true\"\n\t\t[totalRecords]=\"totalRecords\"\n\t\t[loading]=\"loading\"\n\t\t[filterDelay]=\"1000\"\n\t\t[customSort]=\"true\"\n\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t<ng-template pTemplate=\"caption\">\n\t\t\t<div class=\"text-end\">\n\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t(input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tpInputText\n\t\t\t\t\tsize=\"50\"\n\t\t\t\t\tplaceholder=\"Search subscription users...\"\n\t\t\t\t\tclass=\"mw-90\">\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"header\">\n\t\t\t<tr>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"id\">\n\t\t\t\t\t{{ 'Admin.Users.Id' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"id\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"first_name\">\n\t\t\t\t\t{{ 'Label.FirstName' | transloco }}\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_name\">\n\t\t\t\t\t{{ 'Label.LastName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_name\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"email\">\n\t\t\t\t\t{{ 'Label.Email' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"email\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"slug\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.NickName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"slug\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"has_password\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"has_password\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_sign_in_at\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.LastLogin' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"body\"\n\t\t\tlet-user>\n\t\t\t<tr>\n\t\t\t\t<td data-head=\"Id\">{{ user.id }}</td>\n\t\t\t\t<td data-head=\"First Name\">\n\t\t\t\t\t<span class=\"first-name\">{{ user.first_name }}</span>\n\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId === user.id\">\n\t\t\t\t\t\t<span *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Subscription Owner\">\n\t\t\t\t\t\t\t<i class=\"info-icon fas fa-user-tie success\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<span class=\"badge bg-success mx-1 admin-badge\" *ngIf=\"subscriptionAdmins?.includes(user?.id)\"> Admin </span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Name\">\n\t\t\t\t\t{{ user.last_name }}\n\t\t\t\t\t<span *ngIf=\"user?.alpha\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.beta\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.cognito_sso_activated\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa fa-cloud success\" ></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email\">{{ user.email }}</td>\n\t\t\t\t<td data-head=\"Nick Name\">\n\t\t\t\t\t<a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email Confirm\">\n\t\t\t\t\t<span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n\t\t\t\t\t\tcolor=\"success-danger\"\n\t\t\t\t\t\tclass=\"badge\">\n\t\t\t\t\t\t{{ user?.has_password ? 'Yes' : 'No' }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.blocked\"\n\t\t\t\t\t\t[pTooltip]=\"'This user has been blocked'\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Login\">\n\t\t\t\t\t<span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{{ user.current_sign_in_at | dateFormat }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span *ngIf=\"user.current_sign_in_at\">\n\t\t\t\t\t\t\t&nbsp;({{ user.current_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<ng-template #lastSignin>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t{{ user.last_sign_in_at | dateFormat }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span *ngIf=\"user.last_sign_in_at\">\n\t\t\t\t\t\t\t\t&nbsp;({{ user.last_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t<ul class=\"list-unstyled list-inline list-action\">\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t<i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\"  class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId !== user.id\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Set this user as new owner\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t\t<i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\"  class=\"fa fa-user-crown warning fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\"\n\t\t\t\t\t\t\t\t(click)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\tngbTooltip=\"Disable 2FA\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-3 success\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-lock\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<ng-template [ngIf]=\"isUserSubscriptionSuperAdmin\"\n\t\t\t\t\t\t[ngIfElse]=\"empty\">\n\t\t\t\t\t\t<!-- Make Admin -->\n\t\t\t\t\t\t<li ngbTooltip=\"Make Admin\"\n\t\t\t\t\t\t  class=\"me-2 me-sm-3 mx-2\"\n\t\t\t\t\t\t  *ngIf=\"!subscriptionAdmins?.includes(user.id)\">\n\t\t\t\t\t\t  <i\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"fa fa-user-crown fa-lg success\"\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"makeAdmin(user, true)\"\n\t\t\t\t\t\t\t\t\t\t\t\t(keydown.enter)=\"makeAdmin(users, true)\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li></li>\n\t\t\t\t\t\t<!-- Remove Admin -->\n\t\t\t\t\t\t<li ngbTooltip=\"Remove Admin\"\n\t\t\t\t\t\t  class=\"me-2 me-sm-3 mx-2\"\n\t\t\t\t\t\t  *ngIf=\"subscriptionAdmins?.includes(user.id)\">\n\t\t\t\t\t\t  <i\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"fa fa-ban warning fa-lg\"\n\t\t\t\t\t\t\t\t\t\t\t\t(keydown.enter)=\"makeAdmin(user, false)\"\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"makeAdmin(user, false)\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<ng-template #empty>\n\t\t\t\t\t\t\t<li class=\"mx-3\"></li>\n\t\t\t\t\t\t  </ng-template>\n\t\t\t\t\t  </ng-template>\n\t\t\t\t\t\t<li [routerLink]=\"[routers.usersDetails + user.id]\"\n\t\t\t\t\t\t\tngbTooltip=\"Edit\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i class=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n\t\t\t\t\t\t\tngbTooltip=\"Delete\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i (click)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</ng-template>\n\t</p-table>\n\t<div *ngIf=\"totalRecords === 0 && totalUnfilteredCount !== 0\">\n\t\t<pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n\t\t</pw-no-data>\n\t</div>\n\t<span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">\n\t\t{{ 'Label.Total' | transloco }}: {{ totalRecords }}\n\t</span>\n</div>\n<div *ngIf=\"totalUnfilteredCount === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n\n</section>\n\n\n<section id=\"manage-members\"\n  *ngIf=\"isAddEnabled\">\n  <pw-add-members (membersAdded)=\"onMembersAdded()\"\n  ></pw-add-members>\n</section>\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n\t(successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n\t(successEvent)=\"deleteUser($event)\">\n\t<div class=\"row\">\n\t\t<div class=\"col-12\">\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ConfirmPassword' | transloco }}\n\t\t\t</p>\n\t\t</div>\n\t</div>\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n\t(successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: AddMembersComponent, selector: "pw-add-members", outputs: ["membersAdded"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.SinceAgoPipe, name: "sinceAgo" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionUsersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-subscription-users', template: "<div class=\"w-100 text-center mt-3\">\n\t<ng-template [ngIf]=\"!isLoaded\">\n\t\t<p-progressSpinner></p-progressSpinner>\n\t</ng-template>\n</div>\n<div class=\"text-end mb-2\" *ngIf=\"hasAccess && !isAddEnabled\">\n\t<button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n\t  <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n\t</button>\n  </div>\n  <section id=\"members\"\n  *ngIf=\"!isAddEnabled\">\n<div [class.hideTable]=\"totalUnfilteredCount === 0\"\n\tclass=\"primeng-datatable-container table-responsive mt-0\">\n\t<p-table #dt\n\t\t[value]=\"subscriptionMembers\"\n\t\t[paginator]=\"totalRecords !== 0\"\n\t\t[rows]=\"PAGE_SIZE\"\n\t\t[lazy]=\"true\"\n\t\t[totalRecords]=\"totalRecords\"\n\t\t[loading]=\"loading\"\n\t\t[filterDelay]=\"1000\"\n\t\t[customSort]=\"true\"\n\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t<ng-template pTemplate=\"caption\">\n\t\t\t<div class=\"text-end\">\n\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t(input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tpInputText\n\t\t\t\t\tsize=\"50\"\n\t\t\t\t\tplaceholder=\"Search subscription users...\"\n\t\t\t\t\tclass=\"mw-90\">\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"header\">\n\t\t\t<tr>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"id\">\n\t\t\t\t\t{{ 'Admin.Users.Id' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"id\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"first_name\">\n\t\t\t\t\t{{ 'Label.FirstName' | transloco }}\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_name\">\n\t\t\t\t\t{{ 'Label.LastName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_name\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"email\">\n\t\t\t\t\t{{ 'Label.Email' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"email\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"slug\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.NickName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"slug\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"has_password\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"has_password\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_sign_in_at\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.LastLogin' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"body\"\n\t\t\tlet-user>\n\t\t\t<tr>\n\t\t\t\t<td data-head=\"Id\">{{ user.id }}</td>\n\t\t\t\t<td data-head=\"First Name\">\n\t\t\t\t\t<span class=\"first-name\">{{ user.first_name }}</span>\n\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId === user.id\">\n\t\t\t\t\t\t<span *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Subscription Owner\">\n\t\t\t\t\t\t\t<i class=\"info-icon fas fa-user-tie success\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Name\">\n\t\t\t\t\t{{ user.last_name }}\n\t\t\t\t\t<span *ngIf=\"user?.alpha\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.beta\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.cognito_sso_activated\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa fa-cloud success\" ></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email\">{{ user.email }}</td>\n\t\t\t\t<td data-head=\"Nick Name\">\n\t\t\t\t\t<a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email Confirm\">\n\t\t\t\t\t<span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n\t\t\t\t\t\tcolor=\"success-danger\"\n\t\t\t\t\t\tclass=\"badge\">\n\t\t\t\t\t\t{{ user?.has_password ? 'Yes' : 'No' }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.blocked\"\n\t\t\t\t\t\t[pTooltip]=\"'This user has been blocked'\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Login\">\n\t\t\t\t\t<span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{{ user.current_sign_in_at | dateFormat }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span *ngIf=\"user.current_sign_in_at\">\n\t\t\t\t\t\t\t&nbsp;({{ user.current_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<ng-template #lastSignin>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t{{ user.last_sign_in_at | dateFormat }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span *ngIf=\"user.last_sign_in_at\">\n\t\t\t\t\t\t\t\t&nbsp;({{ user.last_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t<ul class=\"list-unstyled list-inline list-action\">\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t<i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\"  class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId !== user.id\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Set this user as new owner\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t\t<i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\"  class=\"fa fa-user-crown warning fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\"\n\t\t\t\t\t\t\t\t(click)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\tngbTooltip=\"Disable 2FA\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-3 success\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-lock\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<li [routerLink]=\"[routers.usersDetails + user.id]\"\n\t\t\t\t\t\t\tngbTooltip=\"Edit\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i class=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n\t\t\t\t\t\t\tngbTooltip=\"Delete\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i (click)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</ng-template>\n\t</p-table>\n\t<div *ngIf=\"totalRecords === 0 && totalUnfilteredCount !== 0\">\n\t\t<pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n\t\t</pw-no-data>\n\t</div>\n\t<span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">\n\t\t{{ 'Label.Total' | transloco }}: {{ totalRecords }}\n\t</span>\n</div>\n<div *ngIf=\"totalUnfilteredCount === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n\n</section>\n\n\n<section id=\"manage-members\"\n  *ngIf=\"isAddEnabled\">\n  <pw-add-members (membersAdded)=\"onMembersAdded()\"\n  ></pw-add-members>\n</section>\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n\t(successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n\t(successEvent)=\"deleteUser($event)\">\n\t<div class=\"row\">\n\t\t<div class=\"col-12\">\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ConfirmPassword' | transloco }}\n\t\t\t</p>\n\t\t</div>\n\t</div>\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n\t(successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"] }]
+            args: [{ selector: 'pw-subscription-users', template: "<div class=\"w-100 text-center mt-3\">\n\t<ng-template [ngIf]=\"!isLoaded\">\n\t\t<p-progressSpinner></p-progressSpinner>\n\t</ng-template>\n</div>\n<div class=\"text-end mb-2\" *ngIf=\"!isAddEnabled && isUserSubscriptionSuperAdmin\">\n\t<button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n\t  <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n\t</button>\n  </div>\n  <section id=\"members\"\n  *ngIf=\"!isAddEnabled\">\n<div [class.hideTable]=\"totalUnfilteredCount === 0\"\n\tclass=\"primeng-datatable-container table-responsive mt-0\">\n\t<p-table #dt\n\t\t[value]=\"subscriptionMembers\"\n\t\t[paginator]=\"totalRecords !== 0\"\n\t\t[rows]=\"PAGE_SIZE\"\n\t\t[lazy]=\"true\"\n\t\t[totalRecords]=\"totalRecords\"\n\t\t[loading]=\"loading\"\n\t\t[filterDelay]=\"1000\"\n\t\t[customSort]=\"true\"\n\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t<ng-template pTemplate=\"caption\">\n\t\t\t<div class=\"text-end\">\n\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t(input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tpInputText\n\t\t\t\t\tsize=\"50\"\n\t\t\t\t\tplaceholder=\"Search subscription users...\"\n\t\t\t\t\tclass=\"mw-90\">\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"header\">\n\t\t\t<tr>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"id\">\n\t\t\t\t\t{{ 'Admin.Users.Id' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"id\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"first_name\">\n\t\t\t\t\t{{ 'Label.FirstName' | transloco }}\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_name\">\n\t\t\t\t\t{{ 'Label.LastName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_name\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"email\">\n\t\t\t\t\t{{ 'Label.Email' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"email\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"slug\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.NickName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"slug\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"has_password\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"has_password\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_sign_in_at\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.LastLogin' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"body\"\n\t\t\tlet-user>\n\t\t\t<tr>\n\t\t\t\t<td data-head=\"Id\">{{ user.id }}</td>\n\t\t\t\t<td data-head=\"First Name\">\n\t\t\t\t\t<span class=\"first-name\">{{ user.first_name }}</span>\n\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId === user.id\">\n\t\t\t\t\t\t<span *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Subscription Owner\">\n\t\t\t\t\t\t\t<i class=\"info-icon fas fa-user-tie success\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<span class=\"badge bg-success mx-1 admin-badge\" *ngIf=\"subscriptionAdmins?.includes(user?.id)\"> Admin </span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Name\">\n\t\t\t\t\t{{ user.last_name }}\n\t\t\t\t\t<span *ngIf=\"user?.alpha\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.beta\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.cognito_sso_activated\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa fa-cloud success\" ></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email\">{{ user.email }}</td>\n\t\t\t\t<td data-head=\"Nick Name\">\n\t\t\t\t\t<a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email Confirm\">\n\t\t\t\t\t<span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n\t\t\t\t\t\tcolor=\"success-danger\"\n\t\t\t\t\t\tclass=\"badge\">\n\t\t\t\t\t\t{{ user?.has_password ? 'Yes' : 'No' }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.blocked\"\n\t\t\t\t\t\t[pTooltip]=\"'This user has been blocked'\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Login\">\n\t\t\t\t\t<span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{{ user.current_sign_in_at | dateFormat }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span *ngIf=\"user.current_sign_in_at\">\n\t\t\t\t\t\t\t&nbsp;({{ user.current_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<ng-template #lastSignin>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t{{ user.last_sign_in_at | dateFormat }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span *ngIf=\"user.last_sign_in_at\">\n\t\t\t\t\t\t\t\t&nbsp;({{ user.last_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t<ul class=\"list-unstyled list-inline list-action\">\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t<i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\"  class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId !== user.id\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Set this user as new owner\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t\t<i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\"  class=\"fa fa-user-crown warning fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\"\n\t\t\t\t\t\t\t\t(click)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\tngbTooltip=\"Disable 2FA\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-3 success\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-lock\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<ng-template [ngIf]=\"isUserSubscriptionSuperAdmin\"\n\t\t\t\t\t\t[ngIfElse]=\"empty\">\n\t\t\t\t\t\t<!-- Make Admin -->\n\t\t\t\t\t\t<li ngbTooltip=\"Make Admin\"\n\t\t\t\t\t\t  class=\"me-2 me-sm-3 mx-2\"\n\t\t\t\t\t\t  *ngIf=\"!subscriptionAdmins?.includes(user.id)\">\n\t\t\t\t\t\t  <i\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"fa fa-user-crown fa-lg success\"\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"makeAdmin(user, true)\"\n\t\t\t\t\t\t\t\t\t\t\t\t(keydown.enter)=\"makeAdmin(users, true)\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li></li>\n\t\t\t\t\t\t<!-- Remove Admin -->\n\t\t\t\t\t\t<li ngbTooltip=\"Remove Admin\"\n\t\t\t\t\t\t  class=\"me-2 me-sm-3 mx-2\"\n\t\t\t\t\t\t  *ngIf=\"subscriptionAdmins?.includes(user.id)\">\n\t\t\t\t\t\t  <i\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"fa fa-ban warning fa-lg\"\n\t\t\t\t\t\t\t\t\t\t\t\t(keydown.enter)=\"makeAdmin(user, false)\"\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"makeAdmin(user, false)\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<ng-template #empty>\n\t\t\t\t\t\t\t<li class=\"mx-3\"></li>\n\t\t\t\t\t\t  </ng-template>\n\t\t\t\t\t  </ng-template>\n\t\t\t\t\t\t<li [routerLink]=\"[routers.usersDetails + user.id]\"\n\t\t\t\t\t\t\tngbTooltip=\"Edit\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i class=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n\t\t\t\t\t\t\tngbTooltip=\"Delete\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i (click)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</ng-template>\n\t</p-table>\n\t<div *ngIf=\"totalRecords === 0 && totalUnfilteredCount !== 0\">\n\t\t<pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n\t\t</pw-no-data>\n\t</div>\n\t<span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">\n\t\t{{ 'Label.Total' | transloco }}: {{ totalRecords }}\n\t</span>\n</div>\n<div *ngIf=\"totalUnfilteredCount === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n\n</section>\n\n\n<section id=\"manage-members\"\n  *ngIf=\"isAddEnabled\">\n  <pw-add-members (membersAdded)=\"onMembersAdded()\"\n  ></pw-add-members>\n</section>\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n\t(successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n\t(successEvent)=\"deleteUser($event)\">\n\t<div class=\"row\">\n\t\t<div class=\"col-12\">\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ConfirmPassword' | transloco }}\n\t\t\t</p>\n\t\t</div>\n\t</div>\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n\t(successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.SubscriptionService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$2.AuthService }, { type: i1$2.WindowService }, { type: i1.AdminService }, { type: i1$2.CustomToastService }], propDecorators: { passwordValidationModalForImpersonate: [{
                 type: ViewChild,
                 args: ['passwordValidationModalForImpersonate', { static: false }]
@@ -6298,7 +6461,7 @@ class SubscriptionAgentsListComponent extends AppBaseComponent {
             .subscribe(response => {
             this.allAgents = response.subscription_agents;
             this.totalRecords = this.allAgents?.length;
-            this.totalUnfilteredCount = response.unfiltered_count || 0;
+            this.totalUnfilteredCount = response.unfiltered_count ?? 0;
         })
             .add(() => {
             this.isLoaded = true;
@@ -6401,7 +6564,7 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
             return {
                 organization_industries: [
                     { id: null, name: 'Select Organization Industry' },
-                    ...(res?.organization_industries || [])
+                    ...(res?.organization_industries ?? [])
                 ]
             };
         }));
@@ -6409,7 +6572,7 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
             return {
                 organization_types: [
                     { id: null, name: 'Select Organization Type' },
-                    ...(res?.organization_types || [])
+                    ...(res?.organization_types ?? [])
                 ]
             };
         }));
@@ -6417,7 +6580,7 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
             return {
                 organization_sizes: [
                     { id: null, name: 'Select Organization Size' },
-                    ...(res?.organization_sizes || [])
+                    ...(res?.organization_sizes ?? [])
                 ]
             };
         }));
@@ -6631,7 +6794,7 @@ class SubscriptionProductDetailsComponent extends AppBaseComponent {
                 this.form.get('expires_at').disable();
                 this.disableExpiresAt = true;
             }
-            const externalPayment = this.permissionService.isSuperAdmin() || !response?.stripe_subscription_id;
+            const externalPayment = this.permissionService.isSuperAdmin() ?? !response?.stripe_subscription_id;
             if (externalPayment) {
                 this.form.get('external_payment').enable();
             }
@@ -6707,7 +6870,7 @@ class SubscriptionProductDetailsComponent extends AppBaseComponent {
             min_units: this.form.value.min_units
         };
         if (this.form.value?.new_product_id) {
-            data['new_product_id'] = this.form.value?.new_product_id?.id || null;
+            data['new_product_id'] = this.form.value?.new_product_id?.id ?? null;
         }
         if (this.form.value.purchased_units) {
             data['purchased_units'] = this.form.value.purchased_units;
@@ -6866,12 +7029,7 @@ class SubscriptionInsightNpsComponent extends AppBaseComponent {
     /** Function to get the data for the graph */
     getChartData() {
         this.graphLoading = true;
-        this.adminService
-            .getSubscriptionAnalytics(SUBSCRIPTION_ANALYTICS_TYPES.NPS, this.subscriptionId, this.selectedDateRange?.startDate
-            ? this.selectedDateRange.startDate.format('YYYY-MM-DD')
-            : '', this.selectedDateRange?.endDate
-            ? this.selectedDateRange.endDate.format('YYYY-MM-DD')
-            : '')
+        HelperService.fetchSubscriptionChartData(this.adminService, SUBSCRIPTION_ANALYTICS_TYPES.NPS, this.subscriptionId, this.selectedDateRange)
             .subscribe(response => {
             this.graph = response;
         })
@@ -6922,12 +7080,7 @@ class SubscriptionInsightAveragePriceComponent extends AppBaseComponent {
     /** Function to get the data for the graph */
     getChartData() {
         this.graphLoading = true;
-        this.adminService
-            .getSubscriptionAnalytics(SUBSCRIPTION_ANALYTICS_TYPES.AVERAGE_PRICE, this.subscriptionId, this.selectedDateRange?.startDate
-            ? this.selectedDateRange.startDate.format('YYYY-MM-DD')
-            : '', this.selectedDateRange?.endDate
-            ? this.selectedDateRange.endDate.format('YYYY-MM-DD')
-            : '')
+        HelperService.fetchSubscriptionChartData(this.adminService, SUBSCRIPTION_ANALYTICS_TYPES.AVERAGE_PRICE, this.subscriptionId, this.selectedDateRange)
             .subscribe(response => {
             this.graph = response;
         })
@@ -6978,12 +7131,7 @@ class SubscriptionInsightProcuctSessionComponent extends AppBaseComponent {
     /** Function to get the data for the graph */
     getChartData() {
         this.graphLoading = true;
-        this.adminService
-            .getSubscriptionAnalytics(SUBSCRIPTION_ANALYTICS_TYPES.SESSION_COUNT, this.subscriptionId, this.selectedDateRange?.startDate
-            ? this.selectedDateRange.startDate.format('YYYY-MM-DD')
-            : '', this.selectedDateRange?.endDate
-            ? this.selectedDateRange.endDate.format('YYYY-MM-DD')
-            : '')
+        HelperService.fetchSubscriptionChartData(this.adminService, SUBSCRIPTION_ANALYTICS_TYPES.SESSION_COUNT, this.subscriptionId, this.selectedDateRange)
             .subscribe(response => {
             this.graph = response;
         })
@@ -7033,12 +7181,7 @@ class SubscriptionInsightUserSessionComponent extends AppBaseComponent {
     }
     getChartData() {
         this.graphLoading = true;
-        this.adminService
-            .getSubscriptionAnalytics(SUBSCRIPTION_ANALYTICS_TYPES.USER_SESSION_COUNT, this.subscriptionId, this.selectedDateRange?.startDate
-            ? this.selectedDateRange.startDate.format('YYYY-MM-DD')
-            : '', this.selectedDateRange?.endDate
-            ? this.selectedDateRange.endDate.format('YYYY-MM-DD')
-            : '')
+        HelperService.fetchSubscriptionChartData(this.adminService, SUBSCRIPTION_ANALYTICS_TYPES.USER_SESSION_COUNT, this.subscriptionId, this.selectedDateRange)
             .subscribe(response => {
             this.graph = response;
         })
@@ -7089,12 +7232,7 @@ class SubscriptionInsightAverageUserComponent extends AppBaseComponent {
     /** Function to get the data for the graph */
     getChartData() {
         this.graphLoading = true;
-        this.adminService
-            .getSubscriptionAnalytics(SUBSCRIPTION_ANALYTICS_TYPES.AVERAGE_USERS, this.subscriptionId, this.selectedDateRange?.startDate
-            ? this.selectedDateRange.startDate.format('YYYY-MM-DD')
-            : '', this.selectedDateRange?.endDate
-            ? this.selectedDateRange.endDate.format('YYYY-MM-DD')
-            : '')
+        HelperService.fetchSubscriptionChartData(this.adminService, SUBSCRIPTION_ANALYTICS_TYPES.AVERAGE_USERS, this.subscriptionId, this.selectedDateRange)
             .subscribe(response => {
             this.graph = response;
         })
@@ -7270,9 +7408,9 @@ class InviteUsersComponent extends AppBaseComponent {
         this.localStorage.getItem$('subscription-list-state').subscribe(res => {
             if (res) {
                 const result = JSON.parse(res);
-                this.searchText = result?.searchText || '';
-                this.status = result?.status || '';
-                this.selectedFeatureKeys = result?.featureKeys || [];
+                this.searchText = result?.searchText ?? '';
+                this.status = result?.status ?? '';
+                this.selectedFeatureKeys = result?.featureKeys ?? [];
                 this.filterByFeatureKeys = this.selectedFeatureKeys;
             }
         });
@@ -7291,7 +7429,7 @@ class InviteUsersComponent extends AppBaseComponent {
     }
     getMinMaxUnits() {
         this.form.get('product_id').valueChanges.subscribe(x => {
-            this.unitsText = x?.unitsText || '';
+            this.unitsText = x?.unitsText ?? '';
         });
     }
     onSave() {
@@ -7333,7 +7471,7 @@ class InviteUsersComponent extends AppBaseComponent {
             this.searchOptions = featureKeys.map(element => {
                 return {
                     id: element,
-                    label: element || ''
+                    label: element ?? ''
                 };
             });
         });
@@ -7480,7 +7618,8 @@ class SubscriptionsListComponent extends AppBaseComponent {
     }
     openRecoverSubscriptionModal(item) {
         this.recoveringItem = item;
-        this.recoverSubscriptionPasswordModal.confirmMessage = 'Admin.Subscriptions.ConfirmRecover';
+        // false positive: not a password, it's a translation key
+        this.recoverSubscriptionPasswordModal.confirmMessage = 'Admin.Subscriptions.ConfirmRecover'; // NOSONAR
         this.recoverSubscriptionPasswordModal.open();
     }
     onRecoverConfirmed() {
@@ -7504,9 +7643,9 @@ class SubscriptionsListComponent extends AppBaseComponent {
         this.localStorage.getItem$('subscription-list-state').subscribe(res => {
             if (res) {
                 const result = JSON.parse(res);
-                this.searchText = result?.searchText || '';
-                this.status = result?.status || '';
-                this.selectedFeatureKeys = result?.featureKeys || [];
+                this.searchText = result?.searchText ?? '';
+                this.status = result?.status ?? '';
+                this.selectedFeatureKeys = result?.featureKeys ?? [];
                 this.filterByFeatureKeys = this.selectedFeatureKeys;
             }
         });
@@ -7532,7 +7671,7 @@ class SubscriptionsListComponent extends AppBaseComponent {
     }
     getMinMaxUnits() {
         this.form.get('product_id').valueChanges.subscribe(x => {
-            this.unitsText = x?.unitsText || '';
+            this.unitsText = x?.unitsText ?? '';
         });
     }
     getData(paging) {
@@ -7556,7 +7695,7 @@ class SubscriptionsListComponent extends AppBaseComponent {
                 this.subscriptions = uniqBy(this.subscriptions, 'id');
             }
             this.subscriptionInsights = response?.subscription_insights;
-            this.totalRecords = response.object_count || 0;
+            this.totalRecords = response.object_count ?? 0;
             this.totalRecordsUnFiltered = response?.unfiltered_count;
         })
             .add(() => {
@@ -7590,7 +7729,7 @@ class SubscriptionsListComponent extends AppBaseComponent {
             this.searchOptions = featureKeys.map(element => {
                 return {
                     id: element,
-                    label: element || ''
+                    label: element ?? ''
                 };
             });
         });
@@ -7690,11 +7829,11 @@ class SubscriptionsListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionsListComponent, deps: [{ token: i1$2.ProductService }, { token: i1.AdminService }, { token: i3$2.UntypedFormBuilder }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$2.CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionsListComponent, selector: "pw-subscriptions-list", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }, { propertyName: "recoverSubscriptionPasswordModal", first: true, predicate: ["recoverSubscriptionPasswordModal"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div\n    class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Subscriptions</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      id=\"btn-create\"\n      [routerLink]=\"[routers.inviteUsers]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Invite a User to a Trial\n    </a>\n  </div>\n</div>\n<div class=\"p-2 mt-3\">\n  <div class=\"w-100 text-center mt-3\">\n    <ng-template [ngIf]=\"!isLoaded\">\n      <p-progressSpinner> </p-progressSpinner>\n    </ng-template>\n  </div>\n  <div class=\"primeng-datatable-container table-responsive mt-0\"\n    [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n    <p-table #dt\n      [value]=\"subscriptions\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <ng-container *ngIf=\"subscriptionInsights\">\n          <div class=\"row mb-4\">\n            <ng-container *ngFor=\"let temp of objectKeys(subscriptionInsights)\">\n              <div class=\"col-12 col-lg-3 mt-2 summary\">\n                <div class=\"card\">\n                  <div class=\"card-body\">\n                    <ng-container *ngFor=\"let item of subscriptionInsights[temp]\">\n                      <div>\n                        <p class=\"mb-0 px-2\">{{ item?.title }}\n                          <span *ngIf=\"item?.info\"\n                            [pTooltip]=\"item?.info\">\n                            <i class=\"fas fa-info-circle\"></i>\n                          </span>\n                        </p>\n                        <h4 class=\"fw-bold mt-2 mb-2\">\n                          {{ item?.value }}\n                        </h4>\n                      </div>\n                    </ng-container>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n        <div class=\"search-filter\">\n          <div class=\"col-12 col-sm-4\">\n            <p-multiSelect placeholder=\"Select Feature Keys\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              [(ngModel)]=\"selectedFeatureKeys\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"col-12 col-sm-4\">\n            <p-dropdown\n              [options]=\"subscriptionStatus\"\n              [placeholder]=\"'Select status'\"\n              (onChange)=\"filterByStatus($event.value)\"\n              [(ngModel)]=\"status\">\n            </p-dropdown>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2 d-none\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"30\"\n              placeholder=\"Search Subscription...\"\n              class=\"mw-90\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Subscriptions.Id' | transloco }}\n            <p-sortIcon field=\"id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"organisation\">\n            {{ 'Admin.Subscriptions.Organization' | transloco }}\n            <p-sortIcon field=\"organisation\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_name\">\n            {{ 'Admin.Subscriptions.ContactName' | transloco }}\n            <p-sortIcon field=\"contact_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_email\">\n            {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n            <p-sortIcon field=\"contact_email\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n          <th scope=\"true\"\n            pSortableColumn=\"stripe_customer_id\">\n            {{ 'Admin.Subscriptions.Paid' | transloco }}\n            <p-sortIcon field=\"stripe_customer_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n          <th scope=\"true\"\n            class=\"expires-at-width\">\n            {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_total\">\n            {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n            <p-sortIcon field=\"sessions_total\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sortIcon field=\"sessions_last_month\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"deleted_at\">\n            {{ 'Admin.Subscriptions.Deleted' | transloco }}\n            <p-sortIcon field=\"deleted_at\"></p-sortIcon>\n          </th>\n          <th class=\"actions-list-two\"\n            scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-item>\n        <tr>\n          <td data-head=\"id\">{{ item.id }}</td>\n          <td data-head=\"Organization\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.organisation\"\n              tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactName\"\n            class=\"custom-break-word\">\n            {{ item.contact_name }}\n          </td>\n          <td data-head=\"ContactEmail\">{{ item.contact_email }}</td>\n          <td data-head=\"Name\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.productName\"\n              tooltipPosition=\"top\">{{ item.productName }}</span>\n          </td>\n          <td data-head=\"Currency\">\n            <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n              color=\"blue-grey\"\n              class=\"badge\">{{ item.currency }}</span>\n          </td>\n          <td data-head=\"Price/M\">\n            <span>{{ (item.price / 100).toFixed(2) | currency:item.currency }}\n              <i\n                              class=\"fa fa-info-circle\"\n                              *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                              aria-hidden=\"true\"\n                              [pTooltip]=\"item?.discount | json\"\n                              tooltipPosition=\"top\"\n                          ></i>\n            </span>\n          </td>\n          <td data-head=\"Paid\">\n            <ng-container *ngIf=\"item?.unsubscribed_at\">\n              <span class=\"badge bg-warning\">Unsub</span>\n            </ng-container>\n            <ng-container *ngIf=\"!item?.unsubscribed_at\">\n              <ng-template [ngIf]=\"item?.stripe_customer_id || item?.external_payment\"\n                [ngIfElse]=\"noBlock\">\n                <span class=\"badge bg-success\">Yes</span>\n              </ng-template>\n              <ng-template #noBlock>\n                <span class=\"badge bg-blue-grey\">No</span>\n              </ng-template>\n            </ng-container>\n            <span *ngIf=\"item?.pause_collection && objectKeys(item?.pause_collection)?.length\"\n              class=\"ms-2\"\n              [pTooltip]=\"item?.pause_collection | json\"\n              tooltipPosition=\"top\">\n              <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n            </span>\n          </td>\n          <td data-head=\"Billing\">\n            <span class=\"badge\"\n              [appDynamicBadge]=\"{\n                              itemsArray: billingFrequency,\n                              item: item?.billingFrequency\n                          }\"\n              color=\"blue-grey\">{{ item.billingFrequency }}</span>\n          </td>\n          <td data-head=\"Expires\">\n            <span [ngClass]=\"getExpiresAtColor(item)\">{{item?.expires_at | dateFormat}}</span><br />\n            <span>{{item?.created_at | sinceAgo}}</span>\n          </td>\n          <td data-head=\"S#\">{{ item?.sessions_total }}</td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': item?.sessions_last_month < 3\n                          }\">{{ item?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Deleted\">\n            <span *ngIf=\"item?.deleted_at\"\n              class=\"badge bg-danger\">Yes</span>\n            <span *ngIf=\"!item?.deleted_at\"\n              class=\"badge bg-blue-grey\">No</span>\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Edit\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.subscriptionDetails, item.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <ng-container *ngIf=\"item.deleted; else showDelete\">\n                <li ngbTooltip=\"Reactivate subscription\"\n                    class=\"me-2 me-sm-3\"\n                    *rbacAllow=\"'Pages.Alpha'\"\n                    (click)=\"openRecoverSubscriptionModal(item)\">\n                  <i class=\"fa fa-trash delete-icon text-success\" aria-hidden=\"true\"></i>\n                </li>\n              </ng-container>\n              <ng-template #showDelete>\n                <li ngbTooltip=\"Delete\"\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              </ng-template>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n    <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n  </div>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionMessage' | transloco\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n</pw-no-data>\n<pw-password-validation\n  #recoverSubscriptionPasswordModal\n  (successEvent)=\"onRecoverConfirmed()\">\n</pw-password-validation>\n\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 767px){.table-responsive td,.table-responsive th{font-size:11px!important}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.summary .card{padding-bottom:0}.summary .card .card-body{padding-top:20px;text-align:center}.summary .card .card-body p,.summary .card .card-body h4{font-size:14px}@media (min-width: 320px) and (max-width: 720px){.primeng-datatable-container .search-filter{display:flex;flex-direction:column;gap:.5rem;justify-content:space-between}}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4$4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i3$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.SinceAgoPipe, name: "sinceAgo" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionsListComponent, selector: "pw-subscriptions-list", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }, { propertyName: "recoverSubscriptionPasswordModal", first: true, predicate: ["recoverSubscriptionPasswordModal"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div\n    class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Subscriptions</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      id=\"btn-create\"\n      [routerLink]=\"[routers.inviteUsers]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Invite a User to a Trial\n    </a>\n  </div>\n</div>\n<div class=\"p-2 mt-3\">\n  <div class=\"w-100 text-center mt-3\">\n    <ng-template [ngIf]=\"!isLoaded\">\n      <p-progressSpinner> </p-progressSpinner>\n    </ng-template>\n  </div>\n  <div class=\"primeng-datatable-container table-responsive mt-0\"\n    [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n    <p-table #dt\n      [value]=\"subscriptions\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <ng-container *ngIf=\"subscriptionInsights\">\n          <div class=\"row mb-4\">\n            <ng-container *ngFor=\"let temp of objectKeys(subscriptionInsights)\">\n              <div class=\"col-12 col-lg-3 mt-2 summary\">\n                <div class=\"card\">\n                  <div class=\"card-body\">\n                    <ng-container *ngFor=\"let item of subscriptionInsights[temp]\">\n                      <div>\n                        <p class=\"mb-0 px-2\">{{ item?.title }}\n                          <span *ngIf=\"item?.info\"\n                            [pTooltip]=\"item?.info\">\n                            <i class=\"fas fa-info-circle\"></i>\n                          </span>\n                        </p>\n                        <h4 class=\"fw-bold mt-2 mb-2\">\n                          {{ item?.value }}\n                        </h4>\n                      </div>\n                    </ng-container>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n        <div class=\"search-filter\">\n          <div class=\"col-12 col-sm-4\">\n            <p-multiSelect placeholder=\"Select Feature Keys\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              [(ngModel)]=\"selectedFeatureKeys\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"col-12 col-sm-4\">\n            <p-dropdown\n              [options]=\"subscriptionStatus\"\n              [placeholder]=\"'Select status'\"\n              (onChange)=\"filterByStatus($event.value)\"\n              [(ngModel)]=\"status\">\n            </p-dropdown>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2 d-none\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"30\"\n              placeholder=\"Search Subscription...\"\n              class=\"mw-90\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Subscriptions.Id' | transloco }}\n            <p-sortIcon field=\"id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"organisation\">\n            {{ 'Admin.Subscriptions.Organization' | transloco }}\n            <p-sortIcon field=\"organisation\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_name\">\n            {{ 'Admin.Subscriptions.ContactName' | transloco }}\n            <p-sortIcon field=\"contact_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_email\">\n            {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n            <p-sortIcon field=\"contact_email\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n          <th scope=\"true\"\n            pSortableColumn=\"stripe_customer_id\">\n            {{ 'Admin.Subscriptions.Paid' | transloco }}\n            <p-sortIcon field=\"stripe_customer_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n          <th scope=\"true\"\n            class=\"expires-at-width\">\n            {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_total\">\n            {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n            <p-sortIcon field=\"sessions_total\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sortIcon field=\"sessions_last_month\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"deleted_at\">\n            {{ 'Admin.Subscriptions.Deleted' | transloco }}\n            <p-sortIcon field=\"deleted_at\"></p-sortIcon>\n          </th>\n          <th class=\"actions-list-two\"\n            scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-item>\n        <tr>\n          <td data-head=\"id\">{{ item.id }}</td>\n          <td data-head=\"Organization\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.organisation\"\n              tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactName\"\n            class=\"custom-break-word\">\n            {{ item.contact_name }}\n          </td>\n          <td data-head=\"ContactEmail\">{{ item.contact_email }}</td>\n          <td data-head=\"Name\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.productName\"\n              tooltipPosition=\"top\">{{ item.productName }}</span>\n          </td>\n          <td data-head=\"Currency\">\n            <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n              color=\"blue-grey\"\n              class=\"badge\">{{ item.currency }}</span>\n          </td>\n          <td data-head=\"Price/M\">\n            <span>{{ (item.price / 100).toFixed(2) | currency:item.currency }}\n              <i\n                              class=\"fa fa-info-circle\"\n                              *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                              aria-hidden=\"true\"\n                              [pTooltip]=\"item?.discount | json\"\n                              tooltipPosition=\"top\"\n                          ></i>\n            </span>\n          </td>\n          <td data-head=\"Paid\">\n            <ng-container *ngIf=\"item?.unsubscribed_at\">\n              <span class=\"badge bg-warning\">Unsub</span>\n            </ng-container>\n            <ng-container *ngIf=\"!item?.unsubscribed_at\">\n              <ng-template [ngIf]=\"item?.stripe_customer_id || item?.external_payment\"\n                [ngIfElse]=\"noBlock\">\n                <span class=\"badge bg-success\">Yes</span>\n              </ng-template>\n              <ng-template #noBlock>\n                <span class=\"badge bg-blue-grey\">No</span>\n              </ng-template>\n            </ng-container>\n            <span *ngIf=\"item?.pause_collection && objectKeys(item?.pause_collection)?.length\"\n              class=\"ms-2\"\n              [pTooltip]=\"item?.pause_collection | json\"\n              tooltipPosition=\"top\">\n              <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n            </span>\n          </td>\n          <td data-head=\"Billing\">\n            <span class=\"badge\"\n              [appDynamicBadge]=\"{\n                              itemsArray: billingFrequency,\n                              item: item?.billingFrequency\n                          }\"\n              color=\"blue-grey\">{{ item.billingFrequency }}</span>\n          </td>\n          <td data-head=\"Expires\">\n            <span [ngClass]=\"getExpiresAtColor(item)\">{{item?.expires_at | dateFormat}}</span><br />\n            <span>{{item?.created_at | sinceAgo}}</span>\n          </td>\n          <td data-head=\"S#\">{{ item?.sessions_total }}</td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': item?.sessions_last_month < 3\n                          }\">{{ item?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Deleted\">\n            <span *ngIf=\"item?.deleted_at\"\n              class=\"badge bg-danger\">Yes</span>\n            <span *ngIf=\"!item?.deleted_at\"\n              class=\"badge bg-blue-grey\">No</span>\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Edit\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.subscriptionDetails, item.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <ng-container *ngIf=\"item.deleted; else showDelete\">\n                <li ngbTooltip=\"Reactivate subscription\"\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              </ng-container>\n              <ng-template #showDelete>\n                <li ngbTooltip=\"Delete\"\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              </ng-template>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n    <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n  </div>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionMessage' | transloco\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n</pw-no-data>\n<pw-password-validation\n  #recoverSubscriptionPasswordModal\n  (successEvent)=\"onRecoverConfirmed()\">\n</pw-password-validation>\n\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 767px){.table-responsive td,.table-responsive th{font-size:11px!important}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.summary .card{padding-bottom:0}.summary .card .card-body{padding-top:20px;text-align:center}.summary .card .card-body p,.summary .card .card-body h4{font-size:14px}@media (min-width: 320px) and (max-width: 720px){.primeng-datatable-container .search-filter{display:flex;flex-direction:column;gap:.5rem;justify-content:space-between}}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4$4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i3$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.SinceAgoPipe, name: "sinceAgo" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-subscriptions-list', template: "<div class=\"row\">\n  <div\n    class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Subscriptions</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      id=\"btn-create\"\n      [routerLink]=\"[routers.inviteUsers]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Invite a User to a Trial\n    </a>\n  </div>\n</div>\n<div class=\"p-2 mt-3\">\n  <div class=\"w-100 text-center mt-3\">\n    <ng-template [ngIf]=\"!isLoaded\">\n      <p-progressSpinner> </p-progressSpinner>\n    </ng-template>\n  </div>\n  <div class=\"primeng-datatable-container table-responsive mt-0\"\n    [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n    <p-table #dt\n      [value]=\"subscriptions\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <ng-container *ngIf=\"subscriptionInsights\">\n          <div class=\"row mb-4\">\n            <ng-container *ngFor=\"let temp of objectKeys(subscriptionInsights)\">\n              <div class=\"col-12 col-lg-3 mt-2 summary\">\n                <div class=\"card\">\n                  <div class=\"card-body\">\n                    <ng-container *ngFor=\"let item of subscriptionInsights[temp]\">\n                      <div>\n                        <p class=\"mb-0 px-2\">{{ item?.title }}\n                          <span *ngIf=\"item?.info\"\n                            [pTooltip]=\"item?.info\">\n                            <i class=\"fas fa-info-circle\"></i>\n                          </span>\n                        </p>\n                        <h4 class=\"fw-bold mt-2 mb-2\">\n                          {{ item?.value }}\n                        </h4>\n                      </div>\n                    </ng-container>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n        <div class=\"search-filter\">\n          <div class=\"col-12 col-sm-4\">\n            <p-multiSelect placeholder=\"Select Feature Keys\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              [(ngModel)]=\"selectedFeatureKeys\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"col-12 col-sm-4\">\n            <p-dropdown\n              [options]=\"subscriptionStatus\"\n              [placeholder]=\"'Select status'\"\n              (onChange)=\"filterByStatus($event.value)\"\n              [(ngModel)]=\"status\">\n            </p-dropdown>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2 d-none\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"30\"\n              placeholder=\"Search Subscription...\"\n              class=\"mw-90\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Subscriptions.Id' | transloco }}\n            <p-sortIcon field=\"id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"organisation\">\n            {{ 'Admin.Subscriptions.Organization' | transloco }}\n            <p-sortIcon field=\"organisation\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_name\">\n            {{ 'Admin.Subscriptions.ContactName' | transloco }}\n            <p-sortIcon field=\"contact_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_email\">\n            {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n            <p-sortIcon field=\"contact_email\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n          <th scope=\"true\"\n            pSortableColumn=\"stripe_customer_id\">\n            {{ 'Admin.Subscriptions.Paid' | transloco }}\n            <p-sortIcon field=\"stripe_customer_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n          <th scope=\"true\"\n            class=\"expires-at-width\">\n            {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_total\">\n            {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n            <p-sortIcon field=\"sessions_total\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sortIcon field=\"sessions_last_month\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"deleted_at\">\n            {{ 'Admin.Subscriptions.Deleted' | transloco }}\n            <p-sortIcon field=\"deleted_at\"></p-sortIcon>\n          </th>\n          <th class=\"actions-list-two\"\n            scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-item>\n        <tr>\n          <td data-head=\"id\">{{ item.id }}</td>\n          <td data-head=\"Organization\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.organisation\"\n              tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactName\"\n            class=\"custom-break-word\">\n            {{ item.contact_name }}\n          </td>\n          <td data-head=\"ContactEmail\">{{ item.contact_email }}</td>\n          <td data-head=\"Name\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.productName\"\n              tooltipPosition=\"top\">{{ item.productName }}</span>\n          </td>\n          <td data-head=\"Currency\">\n            <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n              color=\"blue-grey\"\n              class=\"badge\">{{ item.currency }}</span>\n          </td>\n          <td data-head=\"Price/M\">\n            <span>{{ (item.price / 100).toFixed(2) | currency:item.currency }}\n              <i\n                              class=\"fa fa-info-circle\"\n                              *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                              aria-hidden=\"true\"\n                              [pTooltip]=\"item?.discount | json\"\n                              tooltipPosition=\"top\"\n                          ></i>\n            </span>\n          </td>\n          <td data-head=\"Paid\">\n            <ng-container *ngIf=\"item?.unsubscribed_at\">\n              <span class=\"badge bg-warning\">Unsub</span>\n            </ng-container>\n            <ng-container *ngIf=\"!item?.unsubscribed_at\">\n              <ng-template [ngIf]=\"item?.stripe_customer_id || item?.external_payment\"\n                [ngIfElse]=\"noBlock\">\n                <span class=\"badge bg-success\">Yes</span>\n              </ng-template>\n              <ng-template #noBlock>\n                <span class=\"badge bg-blue-grey\">No</span>\n              </ng-template>\n            </ng-container>\n            <span *ngIf=\"item?.pause_collection && objectKeys(item?.pause_collection)?.length\"\n              class=\"ms-2\"\n              [pTooltip]=\"item?.pause_collection | json\"\n              tooltipPosition=\"top\">\n              <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n            </span>\n          </td>\n          <td data-head=\"Billing\">\n            <span class=\"badge\"\n              [appDynamicBadge]=\"{\n                              itemsArray: billingFrequency,\n                              item: item?.billingFrequency\n                          }\"\n              color=\"blue-grey\">{{ item.billingFrequency }}</span>\n          </td>\n          <td data-head=\"Expires\">\n            <span [ngClass]=\"getExpiresAtColor(item)\">{{item?.expires_at | dateFormat}}</span><br />\n            <span>{{item?.created_at | sinceAgo}}</span>\n          </td>\n          <td data-head=\"S#\">{{ item?.sessions_total }}</td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': item?.sessions_last_month < 3\n                          }\">{{ item?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Deleted\">\n            <span *ngIf=\"item?.deleted_at\"\n              class=\"badge bg-danger\">Yes</span>\n            <span *ngIf=\"!item?.deleted_at\"\n              class=\"badge bg-blue-grey\">No</span>\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Edit\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.subscriptionDetails, item.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <ng-container *ngIf=\"item.deleted; else showDelete\">\n                <li ngbTooltip=\"Reactivate subscription\"\n                    class=\"me-2 me-sm-3\"\n                    *rbacAllow=\"'Pages.Alpha'\"\n                    (click)=\"openRecoverSubscriptionModal(item)\">\n                  <i class=\"fa fa-trash delete-icon text-success\" aria-hidden=\"true\"></i>\n                </li>\n              </ng-container>\n              <ng-template #showDelete>\n                <li ngbTooltip=\"Delete\"\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              </ng-template>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n    <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n  </div>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionMessage' | transloco\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n</pw-no-data>\n<pw-password-validation\n  #recoverSubscriptionPasswordModal\n  (successEvent)=\"onRecoverConfirmed()\">\n</pw-password-validation>\n\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 767px){.table-responsive td,.table-responsive th{font-size:11px!important}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.summary .card{padding-bottom:0}.summary .card .card-body{padding-top:20px;text-align:center}.summary .card .card-body p,.summary .card .card-body h4{font-size:14px}@media (min-width: 320px) and (max-width: 720px){.primeng-datatable-container .search-filter{display:flex;flex-direction:column;gap:.5rem;justify-content:space-between}}\n"] }]
+            args: [{ selector: 'pw-subscriptions-list', template: "<div class=\"row\">\n  <div\n    class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Subscriptions</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      id=\"btn-create\"\n      [routerLink]=\"[routers.inviteUsers]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Invite a User to a Trial\n    </a>\n  </div>\n</div>\n<div class=\"p-2 mt-3\">\n  <div class=\"w-100 text-center mt-3\">\n    <ng-template [ngIf]=\"!isLoaded\">\n      <p-progressSpinner> </p-progressSpinner>\n    </ng-template>\n  </div>\n  <div class=\"primeng-datatable-container table-responsive mt-0\"\n    [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n    <p-table #dt\n      [value]=\"subscriptions\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <ng-container *ngIf=\"subscriptionInsights\">\n          <div class=\"row mb-4\">\n            <ng-container *ngFor=\"let temp of objectKeys(subscriptionInsights)\">\n              <div class=\"col-12 col-lg-3 mt-2 summary\">\n                <div class=\"card\">\n                  <div class=\"card-body\">\n                    <ng-container *ngFor=\"let item of subscriptionInsights[temp]\">\n                      <div>\n                        <p class=\"mb-0 px-2\">{{ item?.title }}\n                          <span *ngIf=\"item?.info\"\n                            [pTooltip]=\"item?.info\">\n                            <i class=\"fas fa-info-circle\"></i>\n                          </span>\n                        </p>\n                        <h4 class=\"fw-bold mt-2 mb-2\">\n                          {{ item?.value }}\n                        </h4>\n                      </div>\n                    </ng-container>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n        <div class=\"search-filter\">\n          <div class=\"col-12 col-sm-4\">\n            <p-multiSelect placeholder=\"Select Feature Keys\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              [(ngModel)]=\"selectedFeatureKeys\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"col-12 col-sm-4\">\n            <p-dropdown\n              [options]=\"subscriptionStatus\"\n              [placeholder]=\"'Select status'\"\n              (onChange)=\"filterByStatus($event.value)\"\n              [(ngModel)]=\"status\">\n            </p-dropdown>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2 d-none\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"30\"\n              placeholder=\"Search Subscription...\"\n              class=\"mw-90\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Subscriptions.Id' | transloco }}\n            <p-sortIcon field=\"id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"organisation\">\n            {{ 'Admin.Subscriptions.Organization' | transloco }}\n            <p-sortIcon field=\"organisation\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_name\">\n            {{ 'Admin.Subscriptions.ContactName' | transloco }}\n            <p-sortIcon field=\"contact_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_email\">\n            {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n            <p-sortIcon field=\"contact_email\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n          <th scope=\"true\"\n            pSortableColumn=\"stripe_customer_id\">\n            {{ 'Admin.Subscriptions.Paid' | transloco }}\n            <p-sortIcon field=\"stripe_customer_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n          <th scope=\"true\"\n            class=\"expires-at-width\">\n            {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_total\">\n            {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n            <p-sortIcon field=\"sessions_total\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sortIcon field=\"sessions_last_month\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"deleted_at\">\n            {{ 'Admin.Subscriptions.Deleted' | transloco }}\n            <p-sortIcon field=\"deleted_at\"></p-sortIcon>\n          </th>\n          <th class=\"actions-list-two\"\n            scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-item>\n        <tr>\n          <td data-head=\"id\">{{ item.id }}</td>\n          <td data-head=\"Organization\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.organisation\"\n              tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactName\"\n            class=\"custom-break-word\">\n            {{ item.contact_name }}\n          </td>\n          <td data-head=\"ContactEmail\">{{ item.contact_email }}</td>\n          <td data-head=\"Name\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.productName\"\n              tooltipPosition=\"top\">{{ item.productName }}</span>\n          </td>\n          <td data-head=\"Currency\">\n            <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n              color=\"blue-grey\"\n              class=\"badge\">{{ item.currency }}</span>\n          </td>\n          <td data-head=\"Price/M\">\n            <span>{{ (item.price / 100).toFixed(2) | currency:item.currency }}\n              <i\n                              class=\"fa fa-info-circle\"\n                              *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                              aria-hidden=\"true\"\n                              [pTooltip]=\"item?.discount | json\"\n                              tooltipPosition=\"top\"\n                          ></i>\n            </span>\n          </td>\n          <td data-head=\"Paid\">\n            <ng-container *ngIf=\"item?.unsubscribed_at\">\n              <span class=\"badge bg-warning\">Unsub</span>\n            </ng-container>\n            <ng-container *ngIf=\"!item?.unsubscribed_at\">\n              <ng-template [ngIf]=\"item?.stripe_customer_id || item?.external_payment\"\n                [ngIfElse]=\"noBlock\">\n                <span class=\"badge bg-success\">Yes</span>\n              </ng-template>\n              <ng-template #noBlock>\n                <span class=\"badge bg-blue-grey\">No</span>\n              </ng-template>\n            </ng-container>\n            <span *ngIf=\"item?.pause_collection && objectKeys(item?.pause_collection)?.length\"\n              class=\"ms-2\"\n              [pTooltip]=\"item?.pause_collection | json\"\n              tooltipPosition=\"top\">\n              <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n            </span>\n          </td>\n          <td data-head=\"Billing\">\n            <span class=\"badge\"\n              [appDynamicBadge]=\"{\n                              itemsArray: billingFrequency,\n                              item: item?.billingFrequency\n                          }\"\n              color=\"blue-grey\">{{ item.billingFrequency }}</span>\n          </td>\n          <td data-head=\"Expires\">\n            <span [ngClass]=\"getExpiresAtColor(item)\">{{item?.expires_at | dateFormat}}</span><br />\n            <span>{{item?.created_at | sinceAgo}}</span>\n          </td>\n          <td data-head=\"S#\">{{ item?.sessions_total }}</td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': item?.sessions_last_month < 3\n                          }\">{{ item?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Deleted\">\n            <span *ngIf=\"item?.deleted_at\"\n              class=\"badge bg-danger\">Yes</span>\n            <span *ngIf=\"!item?.deleted_at\"\n              class=\"badge bg-blue-grey\">No</span>\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Edit\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.subscriptionDetails, item.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <ng-container *ngIf=\"item.deleted; else showDelete\">\n                <li ngbTooltip=\"Reactivate subscription\"\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              </ng-container>\n              <ng-template #showDelete>\n                <li ngbTooltip=\"Delete\"\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              </ng-template>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n    <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n  </div>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionMessage' | transloco\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n</pw-no-data>\n<pw-password-validation\n  #recoverSubscriptionPasswordModal\n  (successEvent)=\"onRecoverConfirmed()\">\n</pw-password-validation>\n\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 767px){.table-responsive td,.table-responsive th{font-size:11px!important}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.summary .card{padding-bottom:0}.summary .card .card-body{padding-top:20px;text-align:center}.summary .card .card-body p,.summary .card .card-body h4{font-size:14px}@media (min-width: 320px) and (max-width: 720px){.primeng-datatable-container .search-filter{display:flex;flex-direction:column;gap:.5rem;justify-content:space-between}}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.ProductService }, { type: i1.AdminService }, { type: i3$2.UntypedFormBuilder }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$2.CommonService }], propDecorators: { refProduct: [{
                 type: ViewChild,
                 args: ['refProduct']
@@ -7910,7 +8049,7 @@ class TagDetailsComponent extends AppBaseComponent {
     }
     dataURLtoBlob(dataUrl) {
         const arr = dataUrl.split(',');
-        const mime = arr[0].match(/:(.*?);/)?.[1] || '';
+        const mime = /^[A-Z]*[a-z]*:(.*?);[A-Z]*/.exec(arr[0])?.[1];
         const bstr = atob(arr[1]);
         let n = bstr.length;
         const u8arr = new Uint8Array(n);
@@ -7922,8 +8061,17 @@ class TagDetailsComponent extends AppBaseComponent {
     handleImageError(event, fallbackPath) {
         HelperService.handleImageFallbackPath(event, fallbackPath);
     }
+    deleteTagImage() {
+        this.image = null;
+        this.file = null;
+    }
+    handleRemovals(data) {
+        if (!this.file && !this.image) {
+            data.remove_image = true;
+        }
+    }
     patchForm(data) {
-        this.form.patchValue(data || {});
+        this.form.patchValue(data ?? {});
     }
     onSave() {
         if (this.form.invalid)
@@ -7952,6 +8100,7 @@ class TagDetailsComponent extends AppBaseComponent {
                 }
             });
         }
+        this.handleRemovals(data);
         data.subscription_id = this.subscriptionId;
         const save$ = id
             ? this.tagService.updateTagById(id, data)
@@ -7980,11 +8129,11 @@ class TagDetailsComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TagDetailsComponent, deps: [{ token: i0.Injector }, { token: i1$2.TagService }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TagDetailsComponent, selector: "pw-tag-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n        </a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          {{ currentTag ? 'Edit Tag' : 'Create Tag' }}\n        </h3>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Tag Name -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.TagName' | transloco\"\n                errorMsg=\"This field is required.\" name=\"name\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"name\" placeholder=\"Tag Name\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Tag Type -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.TagType' | transloco\"\n                errorMsg=\"This field is required.\" name=\"tag_type\">\n                <p-dropdown [options]=\"tagTypes\" formControlName=\"tag_type\"\n                  placeholder=\"Tag Types\" [style]=\"{ width: '100%' }\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n\n            <!-- Category -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.Category' | transloco\"\n                errorMsg=\"This field is required.\" name=\"tag_category_id\">\n                <p-dropdown [options]=\"tagCategories\" formControlName=\"tag_category_id\"\n                  placeholder=\"Category\" [style]=\"{ width: '100%' }\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n\n            <!-- Icon Name -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.IconName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Tags.Tooltip.IconName' | transloco\"\n                name=\"icon_name\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"icon_name\" placeholder=\"Icon Name\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Visible In Resources -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Label.Title' | transloco\" name=\"title\"\n                errorMsg=\"This field is required.\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" placeholder=\"Title\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Tags.Tooltip.VisibleInResources' | transloco\"\n                [label]=\"'Admin.Tags.VisibleInResources' | transloco\"\n                name=\"visible_in_resources\">\n                <ui-switch class=\"d-block\" formControlName=\"visible_in_resources\"></ui-switch>\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-8\">\n              <pw-input-container [label]=\"'Admin.Tags.Description' | transloco\" name=\"description\"\n                errorMsg=\"This field is required.\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\" placeholder=\"Description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-4 display-grid mt-2 text-center\">\n              <label for=\"tagImage\">{{ 'Admin.Tags.Image' | transloco }}</label>\n              <div class=\"text-center d-flex flex-column align-items-center\">\n                <img [src]=\"image !== null ? image : 'assets/img/resource/blog.png'\"\n                     (click)=\"openModal(imageModal)\"\n                     class=\"image cropped-img\"\n                     [ngClass]=\"{ 'w-100': image === null }\"\n                     alt=\"Tag Image\"\n                     (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n\n                <a aria-label=\"Open image cropper\"\n                   class=\"d-inline-block mt-2\"\n                   (click)=\"openModal(imageModal)\">\n                  {{ currentTag ? 'Edit' : 'Add' }} Image\n                </a>\n              </div>\n            </div>\n\n            <!-- Image Upload -->\n          </div>\n\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                [disabled]=\"!form.valid\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n<ng-template #imageModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Image</h5>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload a JPG, GIF, or PNG file. Avoid artwork, celebrities, or copyrighted images.</small>\n    <pw-image-cropper\n      #cropper\n      aspectRatio=\"dynamic\"\n      (imageSelectionEvent)=\"onImageSelected($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .icon-name-input .info-circle .tooltiptext:after{left:76px!important}::ng-deep .icon-name-input .info-circle .tooltiptext{left:-81px!important}.cropped-img{max-width:100%!important;max-height:400px!important}\n"], dependencies: [{ kind: "component", type: i3.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TagDetailsComponent, selector: "pw-tag-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n        </a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          {{ currentTag ? 'Edit Tag' : 'Create Tag' }}\n        </h3>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Tag Name -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.TagName' | transloco\"\n                errorMsg=\"This field is required.\" name=\"name\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"name\" placeholder=\"Tag Name\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Tag Type -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.TagType' | transloco\"\n                errorMsg=\"This field is required.\" name=\"tag_type\">\n                <p-dropdown [options]=\"tagTypes\" formControlName=\"tag_type\"\n                  placeholder=\"Tag Types\" [style]=\"{ width: '100%' }\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n\n            <!-- Category -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.Category' | transloco\"\n                errorMsg=\"This field is required.\" name=\"tag_category_id\">\n                <p-dropdown [options]=\"tagCategories\" formControlName=\"tag_category_id\"\n                  placeholder=\"Category\" [style]=\"{ width: '100%' }\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n\n            <!-- Icon Name -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.IconName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Tags.Tooltip.IconName' | transloco\"\n                name=\"icon_name\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"icon_name\" placeholder=\"Icon Name\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Visible In Resources -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Label.Title' | transloco\" name=\"title\"\n                errorMsg=\"This field is required.\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" placeholder=\"Title\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Tags.Tooltip.VisibleInResources' | transloco\"\n                [label]=\"'Admin.Tags.VisibleInResources' | transloco\"\n                name=\"visible_in_resources\">\n                <ui-switch class=\"d-block\" formControlName=\"visible_in_resources\"></ui-switch>\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-8\">\n              <pw-input-container [label]=\"'Admin.Tags.Description' | transloco\" name=\"description\"\n                errorMsg=\"This field is required.\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\" placeholder=\"Description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-4 display-grid mt-2 text-center\">\n              <label for=\"tagImage\">{{ 'Admin.Tags.Image' | transloco }}</label>\n              <div class=\"text-center d-flex flex-column align-items-center\">\n                <img [src]=\"image !== null ? image : 'assets/img/resource/blog.png'\"\n                     (click)=\"openModal(imageModal)\"\n                     (keydown.enter)=\"openModal(imageModal)\"\n                     class=\"image cropped-img\"\n                     [ngClass]=\"{ 'w-100': image === null }\"\n                     alt=\"Tag preview\"\n                     (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n                     <div class=\"d-flex justify-content-between align-items-center mt-2\">\n                        <a aria-label=\"Open image cropper\"\n                          class=\"d-inline-block mt-2\"\n                          (click)=\"openModal(imageModal)\">\n                          {{ currentTag ? 'Update' : 'Add' }} Image\n                        </a>\n                        <i\n                        class=\"fa fa-trash delete-icon text-danger ms-2\"\n                        title=\"Remove Image\"\n                        (click)=\"deleteTagImage()\"\n                        (keydown.enter)=\"deleteTagImage()\"\n                        style=\"cursor: pointer;\"\n                        *ngIf=\"image && !image.includes('default-photo.jpg') && !image.includes('no_image_uploaded_squared.png')\">\n                        </i>\n                    </div>\n              </div>\n            </div>\n\n            <!-- Image Upload -->\n          </div>\n\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                [disabled]=\"!form.valid\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n<ng-template #imageModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Image</h5>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload a JPG, GIF, or PNG file. Avoid artwork, celebrities, or copyrighted images.</small>\n    <pw-image-cropper\n      #cropper\n      aspectRatio=\"dynamic\"\n      (imageSelectionEvent)=\"onImageSelected($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .icon-name-input .info-circle .tooltiptext:after{left:76px!important}::ng-deep .icon-name-input .info-circle .tooltiptext{left:-81px!important}.cropped-img{max-width:100%!important;max-height:400px!important}\n"], dependencies: [{ kind: "component", type: i3.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TagDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-tag-details', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n        </a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          {{ currentTag ? 'Edit Tag' : 'Create Tag' }}\n        </h3>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Tag Name -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.TagName' | transloco\"\n                errorMsg=\"This field is required.\" name=\"name\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"name\" placeholder=\"Tag Name\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Tag Type -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.TagType' | transloco\"\n                errorMsg=\"This field is required.\" name=\"tag_type\">\n                <p-dropdown [options]=\"tagTypes\" formControlName=\"tag_type\"\n                  placeholder=\"Tag Types\" [style]=\"{ width: '100%' }\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n\n            <!-- Category -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.Category' | transloco\"\n                errorMsg=\"This field is required.\" name=\"tag_category_id\">\n                <p-dropdown [options]=\"tagCategories\" formControlName=\"tag_category_id\"\n                  placeholder=\"Category\" [style]=\"{ width: '100%' }\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n\n            <!-- Icon Name -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.IconName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Tags.Tooltip.IconName' | transloco\"\n                name=\"icon_name\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"icon_name\" placeholder=\"Icon Name\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Visible In Resources -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Label.Title' | transloco\" name=\"title\"\n                errorMsg=\"This field is required.\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" placeholder=\"Title\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Tags.Tooltip.VisibleInResources' | transloco\"\n                [label]=\"'Admin.Tags.VisibleInResources' | transloco\"\n                name=\"visible_in_resources\">\n                <ui-switch class=\"d-block\" formControlName=\"visible_in_resources\"></ui-switch>\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-8\">\n              <pw-input-container [label]=\"'Admin.Tags.Description' | transloco\" name=\"description\"\n                errorMsg=\"This field is required.\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\" placeholder=\"Description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-4 display-grid mt-2 text-center\">\n              <label for=\"tagImage\">{{ 'Admin.Tags.Image' | transloco }}</label>\n              <div class=\"text-center d-flex flex-column align-items-center\">\n                <img [src]=\"image !== null ? image : 'assets/img/resource/blog.png'\"\n                     (click)=\"openModal(imageModal)\"\n                     class=\"image cropped-img\"\n                     [ngClass]=\"{ 'w-100': image === null }\"\n                     alt=\"Tag Image\"\n                     (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n\n                <a aria-label=\"Open image cropper\"\n                   class=\"d-inline-block mt-2\"\n                   (click)=\"openModal(imageModal)\">\n                  {{ currentTag ? 'Edit' : 'Add' }} Image\n                </a>\n              </div>\n            </div>\n\n            <!-- Image Upload -->\n          </div>\n\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                [disabled]=\"!form.valid\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n<ng-template #imageModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Image</h5>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload a JPG, GIF, or PNG file. Avoid artwork, celebrities, or copyrighted images.</small>\n    <pw-image-cropper\n      #cropper\n      aspectRatio=\"dynamic\"\n      (imageSelectionEvent)=\"onImageSelected($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .icon-name-input .info-circle .tooltiptext:after{left:76px!important}::ng-deep .icon-name-input .info-circle .tooltiptext{left:-81px!important}.cropped-img{max-width:100%!important;max-height:400px!important}\n"] }]
+            args: [{ selector: 'pw-tag-details', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n        </a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          {{ currentTag ? 'Edit Tag' : 'Create Tag' }}\n        </h3>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Tag Name -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.TagName' | transloco\"\n                errorMsg=\"This field is required.\" name=\"name\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"name\" placeholder=\"Tag Name\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Tag Type -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.TagType' | transloco\"\n                errorMsg=\"This field is required.\" name=\"tag_type\">\n                <p-dropdown [options]=\"tagTypes\" formControlName=\"tag_type\"\n                  placeholder=\"Tag Types\" [style]=\"{ width: '100%' }\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n\n            <!-- Category -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.Category' | transloco\"\n                errorMsg=\"This field is required.\" name=\"tag_category_id\">\n                <p-dropdown [options]=\"tagCategories\" formControlName=\"tag_category_id\"\n                  placeholder=\"Category\" [style]=\"{ width: '100%' }\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n\n            <!-- Icon Name -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Admin.Tags.IconName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Tags.Tooltip.IconName' | transloco\"\n                name=\"icon_name\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"icon_name\" placeholder=\"Icon Name\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Visible In Resources -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [label]=\"'Label.Title' | transloco\" name=\"title\"\n                errorMsg=\"This field is required.\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" placeholder=\"Title\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Tags.Tooltip.VisibleInResources' | transloco\"\n                [label]=\"'Admin.Tags.VisibleInResources' | transloco\"\n                name=\"visible_in_resources\">\n                <ui-switch class=\"d-block\" formControlName=\"visible_in_resources\"></ui-switch>\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-8\">\n              <pw-input-container [label]=\"'Admin.Tags.Description' | transloco\" name=\"description\"\n                errorMsg=\"This field is required.\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\" placeholder=\"Description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-4 display-grid mt-2 text-center\">\n              <label for=\"tagImage\">{{ 'Admin.Tags.Image' | transloco }}</label>\n              <div class=\"text-center d-flex flex-column align-items-center\">\n                <img [src]=\"image !== null ? image : 'assets/img/resource/blog.png'\"\n                     (click)=\"openModal(imageModal)\"\n                     (keydown.enter)=\"openModal(imageModal)\"\n                     class=\"image cropped-img\"\n                     [ngClass]=\"{ 'w-100': image === null }\"\n                     alt=\"Tag preview\"\n                     (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n                     <div class=\"d-flex justify-content-between align-items-center mt-2\">\n                        <a aria-label=\"Open image cropper\"\n                          class=\"d-inline-block mt-2\"\n                          (click)=\"openModal(imageModal)\">\n                          {{ currentTag ? 'Update' : 'Add' }} Image\n                        </a>\n                        <i\n                        class=\"fa fa-trash delete-icon text-danger ms-2\"\n                        title=\"Remove Image\"\n                        (click)=\"deleteTagImage()\"\n                        (keydown.enter)=\"deleteTagImage()\"\n                        style=\"cursor: pointer;\"\n                        *ngIf=\"image && !image.includes('default-photo.jpg') && !image.includes('no_image_uploaded_squared.png')\">\n                        </i>\n                    </div>\n              </div>\n            </div>\n\n            <!-- Image Upload -->\n          </div>\n\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                [disabled]=\"!form.valid\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n<ng-template #imageModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Image</h5>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload a JPG, GIF, or PNG file. Avoid artwork, celebrities, or copyrighted images.</small>\n    <pw-image-cropper\n      #cropper\n      aspectRatio=\"dynamic\"\n      (imageSelectionEvent)=\"onImageSelected($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .icon-name-input .info-circle .tooltiptext:after{left:76px!important}::ng-deep .icon-name-input .info-circle .tooltiptext{left:-81px!important}.cropped-img{max-width:100%!important;max-height:400px!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.TagService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }] });
 
 class TagsListComponent extends AppBaseComponent {
@@ -8063,7 +8212,7 @@ class TagsListComponent extends AppBaseComponent {
         this.tagService.getAvailableTagType(this.subscriptionId).subscribe(response => {
             response.available_tag_types.forEach(element => {
                 this.tagTypes.push({
-                    label: element || '',
+                    label: element ?? '',
                     value: element
                 });
             });
@@ -8102,11 +8251,11 @@ class TagsListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TagsListComponent, deps: [{ token: i0.Injector }, { token: i1$1.NgbModal }, { token: i1$2.TagService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TagsListComponent, selector: "pw-admin-tags-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Tags</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\" data-cy=\"create-tag\" class=\"btn btn-sm btn-outline-primary float-end\"\n    [routerLink]=\"['/' + routers.createTag]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Tag </button>\n  </div>\n</div>\n\n<div class=\"p-2\">\n  <p>\n    Here you can define the tags to be used site-wide.<br /> Tags need to be associated to categories (definable in the\n    \"category\" tab).<br /> Tags also need to be associated to a \"tag_type\", which is the entity you want to associate the\n    tag to, for example \"user\".\n  </p>\n</div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"totalTagRecordsUnFilter === 0\">\n  <p-table #dt\n    [value]=\"tags\"\n    [paginator]=\"totalTagRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalTagRecords\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n    [loading]=\"loading\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Tag...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"tag_category_id\">\n          {{ 'Admin.Tags.Category' | transloco }}\n          <p-sortIcon field=\"tag_category_id\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Name\">{{ item?.name }}</td>\n        <td data-head=\"Category\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: tagCategoryNames,\n                            item: item?.category_name\n                        }\"\n            color=\"cyan\"\n            class=\"badge\">{{ item?.category_name }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n              (click)=\"navigateToEdit(item)\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Roles.Delete'\"\n              (keydown.enter)=\"onDelete(item)\"\n              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"totalTagRecords === 0 && totalTagRecordsUnFilter !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n  </div>\n  <span class=\"total-records-count\" *ngIf=\"totalTagRecords !== 0\" >{{ 'Label.Total' | transloco }}: {{ totalTagRecords }}</span>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.Category' | transloco\"\n  *ngIf=\"totalTagRecordsUnFilter === 0 && !loading\">\n</pw-no-data>\n", styles: ["::ng-deep .icon-name-input .info-circle .tooltiptext:after{left:76px!important}::ng-deep .icon-name-input .info-circle .tooltiptext{left:-81px!important}.cropped-img{max-width:100%!important;max-height:400px!important}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TagsListComponent, selector: "pw-admin-tags-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Tags</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\" data-cy=\"create-tag\" class=\"btn btn-sm btn-outline-primary float-end\"\n    [routerLink]=\"['/' + routers.createTag]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Tag </button>\n  </div>\n</div>\n\n<div class=\"p-2\">\n  <p>\n    Here you can define the tags to be used site-wide.<br /> Tags need to be associated to categories (definable in the\n    \"category\" tab).<br /> Tags also need to be associated to a \"tag_type\", which is the entity you want to associate the\n    tag to, for example \"user\".\n  </p>\n</div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"totalTagRecordsUnFilter === 0\">\n  <p-table #dt\n    [value]=\"tags\"\n    [paginator]=\"totalTagRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalTagRecords\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n    [loading]=\"loading\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Tag...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"tag_category_id\">\n          {{ 'Admin.Tags.Category' | transloco }}\n          <p-sortIcon field=\"tag_category_id\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Name\">{{ item?.name }}</td>\n        <td data-head=\"Category\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: tagCategoryNames,\n                            item: item?.category_name\n                        }\"\n            color=\"cyan\"\n            class=\"badge\">{{ item?.category_name }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n              (keydown.enter)=\"navigateToEdit(item)\"\n              (click)=\"navigateToEdit(item)\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Roles.Delete'\"\n              (keydown.enter)=\"onDelete(item)\"\n              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"totalTagRecords === 0 && totalTagRecordsUnFilter !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n  </div>\n  <span class=\"total-records-count\" *ngIf=\"totalTagRecords !== 0\" >{{ 'Label.Total' | transloco }}: {{ totalTagRecords }}</span>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.Category' | transloco\"\n  *ngIf=\"totalTagRecordsUnFilter === 0 && !loading\">\n</pw-no-data>\n", styles: ["::ng-deep .icon-name-input .info-circle .tooltiptext:after{left:76px!important}::ng-deep .icon-name-input .info-circle .tooltiptext{left:-81px!important}.cropped-img{max-width:100%!important;max-height:400px!important}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TagsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-tags-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Tags</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\" data-cy=\"create-tag\" class=\"btn btn-sm btn-outline-primary float-end\"\n    [routerLink]=\"['/' + routers.createTag]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Tag </button>\n  </div>\n</div>\n\n<div class=\"p-2\">\n  <p>\n    Here you can define the tags to be used site-wide.<br /> Tags need to be associated to categories (definable in the\n    \"category\" tab).<br /> Tags also need to be associated to a \"tag_type\", which is the entity you want to associate the\n    tag to, for example \"user\".\n  </p>\n</div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"totalTagRecordsUnFilter === 0\">\n  <p-table #dt\n    [value]=\"tags\"\n    [paginator]=\"totalTagRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalTagRecords\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n    [loading]=\"loading\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Tag...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"tag_category_id\">\n          {{ 'Admin.Tags.Category' | transloco }}\n          <p-sortIcon field=\"tag_category_id\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Name\">{{ item?.name }}</td>\n        <td data-head=\"Category\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: tagCategoryNames,\n                            item: item?.category_name\n                        }\"\n            color=\"cyan\"\n            class=\"badge\">{{ item?.category_name }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n              (click)=\"navigateToEdit(item)\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Roles.Delete'\"\n              (keydown.enter)=\"onDelete(item)\"\n              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"totalTagRecords === 0 && totalTagRecordsUnFilter !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n  </div>\n  <span class=\"total-records-count\" *ngIf=\"totalTagRecords !== 0\" >{{ 'Label.Total' | transloco }}: {{ totalTagRecords }}</span>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.Category' | transloco\"\n  *ngIf=\"totalTagRecordsUnFilter === 0 && !loading\">\n</pw-no-data>\n", styles: ["::ng-deep .icon-name-input .info-circle .tooltiptext:after{left:76px!important}::ng-deep .icon-name-input .info-circle .tooltiptext{left:-81px!important}.cropped-img{max-width:100%!important;max-height:400px!important}\n"] }]
+            args: [{ selector: 'pw-admin-tags-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Tags</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\" data-cy=\"create-tag\" class=\"btn btn-sm btn-outline-primary float-end\"\n    [routerLink]=\"['/' + routers.createTag]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Tag </button>\n  </div>\n</div>\n\n<div class=\"p-2\">\n  <p>\n    Here you can define the tags to be used site-wide.<br /> Tags need to be associated to categories (definable in the\n    \"category\" tab).<br /> Tags also need to be associated to a \"tag_type\", which is the entity you want to associate the\n    tag to, for example \"user\".\n  </p>\n</div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"totalTagRecordsUnFilter === 0\">\n  <p-table #dt\n    [value]=\"tags\"\n    [paginator]=\"totalTagRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalTagRecords\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n    [loading]=\"loading\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Tag...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"tag_category_id\">\n          {{ 'Admin.Tags.Category' | transloco }}\n          <p-sortIcon field=\"tag_category_id\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Name\">{{ item?.name }}</td>\n        <td data-head=\"Category\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: tagCategoryNames,\n                            item: item?.category_name\n                        }\"\n            color=\"cyan\"\n            class=\"badge\">{{ item?.category_name }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n              (keydown.enter)=\"navigateToEdit(item)\"\n              (click)=\"navigateToEdit(item)\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Roles.Delete'\"\n              (keydown.enter)=\"onDelete(item)\"\n              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"totalTagRecords === 0 && totalTagRecordsUnFilter !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n  </div>\n  <span class=\"total-records-count\" *ngIf=\"totalTagRecords !== 0\" >{{ 'Label.Total' | transloco }}: {{ totalTagRecords }}</span>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.Category' | transloco\"\n  *ngIf=\"totalTagRecordsUnFilter === 0 && !loading\">\n</pw-no-data>\n", styles: ["::ng-deep .icon-name-input .info-circle .tooltiptext:after{left:76px!important}::ng-deep .icon-name-input .info-circle .tooltiptext{left:-81px!important}.cropped-img{max-width:100%!important;max-height:400px!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.NgbModal }, { type: i1$2.TagService }, { type: i0.ChangeDetectorRef }] });
 
 class TagsTabsComponent {
@@ -8531,10 +8680,8 @@ class AhoyEventsComponent extends AppBaseComponent {
     }
     getAhoyEvents(paging) {
         this.isLoaded = false;
-        let service = this.microServices.find(x => x.name === this.selectedMicroService);
-        if (!service) {
-            service = this.microServices.find(x => x.value === this.appConfig.links?.main_api);
-        }
+        const service = this.microServices.find(x => x.name === this.selectedMicroService) ??
+            this.microServices.find(x => x.value === this.appConfig.links?.main_api);
         const obj = {
             ...paging,
             ...(this.startDate && this.endDate
@@ -8544,7 +8691,8 @@ class AhoyEventsComponent extends AppBaseComponent {
                 }
                 : {}),
             search: this.searchText || '',
-            user_ids: this.selectedOption.length ? this.selectedOption.toString() : undefined // Only include if there are selected options
+            user_ids: this.selectedOption?.join(',') || undefined
+            // NOSONAR
         };
         Object.keys(obj).forEach(key => obj[key] === undefined && delete obj[key]);
         this.ahoyService
@@ -8672,10 +8820,8 @@ class AhoyMessagesComponent extends AppBaseComponent {
     }
     getAhoyMessages(paging) {
         this.isLoaded = false;
-        let service = this.microServices.find(x => x.name === this.selectedMicroService);
-        if (!service) {
-            service = this.microServices.find(x => x.value === this.appConfig.links?.main_api);
-        }
+        const service = this.microServices.find(x => x.name === this.selectedMicroService) ??
+            this.microServices.find(x => x.value === this.appConfig.links?.main_api);
         const obj = {
             ...paging,
             ...(this.startDate && this.endDate
@@ -8685,7 +8831,8 @@ class AhoyMessagesComponent extends AppBaseComponent {
                 }
                 : {}),
             search: this.searchText || '',
-            user_ids: this.selectedOption.length ? this.selectedOption.toString() : undefined // Only include if there are selected options
+            user_ids: this.selectedOption?.join(',') || undefined
+            // NOSONAR
         };
         Object.keys(obj).forEach(key => obj[key] === undefined && delete obj[key]);
         this.ahoyService
@@ -8895,7 +9042,7 @@ class AhoyVisitsComponent extends AppBaseComponent {
     }
     getAhoyVisits(paging) {
         this.isLoaded = false;
-        const service = this.microServices.find(x => x.name === this.selectedMicroService) ||
+        const service = this.microServices.find(x => x.name === this.selectedMicroService) ??
             this.microServices.find(x => x.value === this.appConfig.links?.main_api);
         const obj = {
             ...paging,
@@ -8906,7 +9053,8 @@ class AhoyVisitsComponent extends AppBaseComponent {
                 }
                 : {}),
             search: this.searchText || '',
-            user_ids: this.selectedOption.length ? this.selectedOption.toString() : undefined // Only include if there are selected options
+            user_ids: this.selectedOption?.join(',') || undefined
+            // NOSONAR
         };
         Object.keys(obj).forEach(key => obj[key] === undefined && delete obj[key]);
         this.ahoyService
@@ -9069,7 +9217,7 @@ class EventsComponent extends AppBaseComponent {
     }
     getEvents(paging) {
         this.isLoaded = false;
-        const service = this.microServices.find(x => x.name === this.selectedMicroService) ||
+        const service = this.microServices.find(x => x.name === this.selectedMicroService) ??
             this.microServices.find(x => x.value === this.appConfig.links?.main_api);
         const obj = {
             ...paging,
@@ -9080,7 +9228,8 @@ class EventsComponent extends AppBaseComponent {
                 }
                 : {}),
             search: this.searchText || '',
-            user_ids: this.selectedOption.length ? this.selectedOption.toString() : undefined // Only include if there are selected options
+            user_ids: this.selectedOption?.join(',') || undefined
+            // NOSONAR
         };
         Object.keys(obj).forEach(key => obj[key] === undefined && delete obj[key]);
         this.ahoyService
@@ -9249,7 +9398,7 @@ class VersionsComponent extends AppBaseComponent {
     }
     getVersions(paging) {
         this.isLoaded = false;
-        const service = this.microServices.find(x => x.name === this.selectedMicroService) ||
+        const service = this.microServices.find(x => x.name === this.selectedMicroService) ??
             this.microServices.find(x => x.value === this.appConfig.links?.main_api);
         const obj = {
             ...paging,
@@ -9260,7 +9409,7 @@ class VersionsComponent extends AppBaseComponent {
                 }
                 : {}),
             search: this.searchText || '',
-            user_ids: this.selectedOption.length ? this.selectedOption.toString() : undefined
+            user_ids: this.selectedOption?.join(',') || undefined
         };
         Object.keys(obj).forEach(key => obj[key] === undefined && delete obj[key]);
         this.ahoyService
@@ -9412,7 +9561,7 @@ class UserDetailsComponent extends AppBaseComponent {
             .getUserById(this.id, this.subscriptionId)
             .subscribe(user => {
             this.user = user;
-            this.user.send_marketing_emails = user.send_marketing_emails || false;
+            this.user.send_marketing_emails = user.send_marketing_emails ?? false;
             this.form.patchValue(user);
         })
             .add(() => {
@@ -9453,7 +9602,10 @@ class UserDetailsComponent extends AppBaseComponent {
             .createUser(this.form.value)
             .subscribe(response => {
             if (response.error) {
-                this.toast.error(`${Object.keys(response.error.message)[0]} ${Object.values(response.error.message).join('')}`);
+                this.toast.error(`${Object.keys(response.error.message)[0]} ${Object.values(response.error.message)
+                    .flat()
+                    .map(value => typeof value === 'string' ? value : JSON.stringify(value))
+                    .join('')}`);
             }
             else {
                 this.toast.success(this.translation.translate('Admin.Users.AddedMessage'));
@@ -9632,7 +9784,7 @@ class UserListComponent extends AppBaseComponent {
         });
     }
     initializeSearchText(res) {
-        this.searchText = res?.searchText || '';
+        this.searchText = res?.searchText ?? '';
     }
     initializeSelectedOption(res) {
         if (res?.selectedOption?.value) {
@@ -9642,24 +9794,24 @@ class UserListComponent extends AppBaseComponent {
     }
     initializeSearchDataSource(res) {
         if (res?.searchDataSource?.length) {
-            this.searchDataSource = res?.searchDataSource || [];
+            this.searchDataSource = res?.searchDataSource ?? [];
         }
     }
     initializeCriteria(res) {
         if (res?.selectedOption?.value === 'feature_key') {
-            this.criteria = res?.filterByFeatureKeys || [];
+            this.criteria = res?.filterByFeatureKeys ?? [];
         }
         if (res?.selectedOption?.value === 'product') {
-            this.criteria = res?.filterByProducts || [];
+            this.criteria = res?.filterByProducts ?? [];
         }
         if (res?.selectedOption?.value === 'role') {
-            this.criteria = res?.filterByRoles || [];
+            this.criteria = res?.filterByRoles ?? [];
         }
     }
     initializeFilters(res) {
-        this.filterByFeatureKeys = res?.filterByFeatureKeys || [];
-        this.filterByProducts = res?.filterByProducts || [];
-        this.filterByRoles = res?.filterByRoles || [];
+        this.filterByFeatureKeys = res?.filterByFeatureKeys ?? [];
+        this.filterByProducts = res?.filterByProducts ?? [];
+        this.filterByRoles = res?.filterByRoles ?? [];
     }
     ngAfterViewChecked() {
         this.cdr.detectChanges();
@@ -9696,13 +9848,13 @@ class UserListComponent extends AppBaseComponent {
                 this.productList = resp.products.map(element => {
                     return {
                         value: element.id,
-                        label: element.name || ''
+                        label: element.name ?? ''
                     };
                 });
                 this.featureKeysList = resp.products.map(element => {
                     return {
                         value: element.feature_key,
-                        label: element.feature_key || ''
+                        label: element.feature_key ?? ''
                     };
                 });
                 this.productList.unshift({