@posiwise/admin-module 0.0.161 → 0.0.162

package/fesm2022/posiwise-admin-module.mjs

@@ -996,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,
@@ -1015,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);
@@ -1037,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)
@@ -1198,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 ?? '']
                     })))
                 }));
             });
@@ -1233,12 +1279,12 @@ class DomainConfigBuildComponent extends AppBaseComponent {
             }
             const abTestsArray = this.abTests;
             abTestsArray.clear();
-            (res.config?.ab_tests || []).forEach(test => {
+            (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 || '']
+                    description: [test?.description ?? ''],
+                    experiment_name: [test?.experiment_name ?? ''],
+                    db_shard: [test?.db_shard ?? ''],
+                    microservice_name: [test?.microservice_name ?? '']
                 }));
             });
         })
@@ -1264,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);
         });
@@ -1355,10 +1401,10 @@ 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);
@@ -1536,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);
@@ -1611,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);
@@ -1686,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);
@@ -1761,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);
@@ -1853,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);
@@ -1954,7 +2000,7 @@ class DomainConfigDetailsComponent extends AppBaseComponent {
             }
         });
         this.route.queryParams.subscribe(res => {
-            this.activeTab = res['tabId'] || 'Core';
+            this.activeTab = res['tabId'] ?? 'Core';
         });
     }
     onTabChange(event) {
@@ -2147,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;
@@ -2188,7 +2234,7 @@ class AddFaqComponent extends AppBaseComponent {
                 this.featureKeysList = featureKeys.map(element => {
                     return {
                         value: element,
-                        label: element || ''
+                        label: element ?? ''
                     };
                 });
             }
@@ -2331,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 };
             });
         });
     }
@@ -2384,7 +2430,7 @@ class EditFaqComponent extends AppBaseComponent {
                 this.featureKeysList = featureKeys.map(element => {
                     return {
                         value: element,
-                        label: element || ''
+                        label: element ?? ''
                     };
                 });
             }
@@ -2535,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
                 });
             });
@@ -2546,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;
         }
@@ -2574,7 +2620,7 @@ class FaqListComponent extends AppBaseComponent {
                 this.featureKeysList = featureKeys.map(element => {
                     return {
                         value: element,
-                        label: element || ''
+                        label: element ?? ''
                     };
                 });
             }
@@ -3314,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
@@ -4868,7 +4914,7 @@ class ProductDetailsComponent extends AppBaseComponent {
                 this.productsList = resp.products.map(element => {
                     return {
                         value: element.id,
-                        label: element.name || ''
+                        label: element.name ?? ''
                     };
                 });
             }
@@ -4918,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);
@@ -5221,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');
@@ -5258,7 +5304,7 @@ class ProductsListComponent extends AppBaseComponent {
     getCategories() {
         this.productService.getProductCategories().subscribe(response => {
             if (response?.categories) {
-                this.categories = response?.categories || [];
+                this.categories = response?.categories ?? [];
             }
         });
     }
@@ -5389,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);
             }
@@ -5511,53 +5557,65 @@ class ResourceAdminDetailsComponent extends AppBaseComponent {
     }
     onUpdate() {
         const data = { ...this.form.value };
-        console.log(this.file);
+        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)
@@ -5621,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)=\"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                        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=\"Rectangular Picture\"\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                      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 }); }
+    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'),
@@ -5631,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)=\"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                        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=\"Rectangular Picture\"\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                      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"] }]
+            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 {
@@ -5787,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)=\"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" }] }); }
+    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)=\"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" }]
+            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 {
@@ -5918,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 });
@@ -5949,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();
             });
         });
@@ -6017,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;
         })
@@ -6207,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;
@@ -6339,15 +6398,15 @@ class SubscriptionUsersComponent extends AppBaseComponent {
         this.subscriptionService
             .getEnrolledSubscription(this.id, paging)
             .subscribe(response => {
-            this.subscriptionMembers = response?.members || [];
-            this.subscriptionAdmins = response?.admins || [];
+            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;
@@ -6355,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\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]=\"hasAccess && user.id !== subscriptionOwner\"\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" }] }); }
+    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\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]=\"hasAccess && user.id !== subscriptionOwner\"\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"] }]
+            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 }]
@@ -6402,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;
@@ -6505,7 +6564,7 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
             return {
                 organization_industries: [
                     { id: null, name: 'Select Organization Industry' },
-                    ...(res?.organization_industries || [])
+                    ...(res?.organization_industries ?? [])
                 ]
             };
         }));
@@ -6513,7 +6572,7 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
             return {
                 organization_types: [
                     { id: null, name: 'Select Organization Type' },
-                    ...(res?.organization_types || [])
+                    ...(res?.organization_types ?? [])
                 ]
             };
         }));
@@ -6521,7 +6580,7 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
             return {
                 organization_sizes: [
                     { id: null, name: 'Select Organization Size' },
-                    ...(res?.organization_sizes || [])
+                    ...(res?.organization_sizes ?? [])
                 ]
             };
         }));
@@ -6735,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();
             }
@@ -6811,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;
@@ -6970,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;
         })
@@ -7026,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;
         })
@@ -7082,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;
         })
@@ -7137,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;
         })
@@ -7193,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;
         })
@@ -7374,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;
             }
         });
@@ -7395,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() {
@@ -7437,7 +7471,7 @@ class InviteUsersComponent extends AppBaseComponent {
             this.searchOptions = featureKeys.map(element => {
                 return {
                     id: element,
-                    label: element || ''
+                    label: element ?? ''
                 };
             });
         });
@@ -7584,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() {
@@ -7608,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;
             }
         });
@@ -7636,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) {
@@ -7660,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(() => {
@@ -7694,7 +7729,7 @@ class SubscriptionsListComponent extends AppBaseComponent {
             this.searchOptions = featureKeys.map(element => {
                 return {
                     id: element,
-                    label: element || ''
+                    label: element ?? ''
                 };
             });
         });
@@ -7794,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']
@@ -8014,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);
@@ -8026,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)
@@ -8056,6 +8100,7 @@ class TagDetailsComponent extends AppBaseComponent {
                 }
             });
         }
+        this.handleRemovals(data);
         data.subscription_id = this.subscriptionId;
         const save$ = id
             ? this.tagService.updateTagById(id, data)
@@ -8084,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 {
@@ -8167,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
                 });
             });
@@ -8206,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 {
@@ -8635,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
@@ -8648,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
@@ -8776,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
@@ -8789,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
@@ -8999,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,
@@ -9010,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
@@ -9173,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,
@@ -9184,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
@@ -9353,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,
@@ -9364,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
@@ -9516,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(() => {
@@ -9557,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'));
@@ -9736,7 +9784,7 @@ class UserListComponent extends AppBaseComponent {
         });
     }
     initializeSearchText(res) {
-        this.searchText = res?.searchText || '';
+        this.searchText = res?.searchText ?? '';
     }
     initializeSelectedOption(res) {
         if (res?.selectedOption?.value) {
@@ -9746,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();
@@ -9800,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({