@posiwise/admin-module 0.0.194 → 0.0.196
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1037,6 +1037,10 @@ class DomainConfigBuildComponent extends AppBaseComponent {
|
|
|
1037
1037
|
this.productsList = this.groupProducts(res?.getProduct?.products);
|
|
1038
1038
|
// config to patch values
|
|
1039
1039
|
this.data = res.config;
|
|
1040
|
+
const data = this.data;
|
|
1041
|
+
if (!Array.isArray(data.ab_tests)) {
|
|
1042
|
+
data.ab_tests = [];
|
|
1043
|
+
}
|
|
1040
1044
|
const demo = this.data.book_demo;
|
|
1041
1045
|
const demoGroup = this.form.get('book_demo');
|
|
1042
1046
|
const itemsArray = demoGroup.get('items');
|
|
@@ -1379,7 +1383,7 @@ class DomainConfigBuildComponent extends AppBaseComponent {
|
|
|
1379
1383
|
});
|
|
1380
1384
|
}
|
|
1381
1385
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DomainConfigBuildComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }, { token: i1$2.ProductService }, { token: i2$1.NgbModal }, { token: i3$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1382
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: DomainConfigBuildComponent, isStandalone: false, selector: "pw-domain-config-build", viewQueries: [{ propertyName: "partnerCropper", first: true, predicate: ["partnerCropper"], descendants: true }, { propertyName: "uploader", predicate: CustomUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n <p> The following parameters and settings will be applied to all public pages of this domain. </p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"!isLoading && data?.host_name\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscription' | transloco\"\n name=\"master_subscription_id\" controlId=\"domain-build-master_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_id-label'\"\n [options]=\"masterSubscriptionsList\"\n formControlName=\"master_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n placeholder=\"Select Master Subscription\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n \"\n name=\"master_subscription_product_id\" controlId=\"domain-build-master_subscription_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_product_id-label'\"\n [options]=\"masterSubscriptionProductList\"\n formControlName=\"master_subscription_product_id\"\n [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n [placeholder]=\"'Select Master Product'\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n name=\"blog_feature_key\" controlId=\"domain-build-blog_feature_key\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n <input type=\"text\"\n id=\"domain-build-blog_feature_key\"\n class=\"form-control\"\n formControlName=\"blog_feature_key\"\n [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n name=\"main_tos_id\" controlId=\"domain-build-main_tos_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-main_tos_id-label'\"\n [options]=\"subscriptionTosList\"\n formControlName=\"main_tos_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n [placeholder]=\"'Select Main TOS'\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n </p-select>\n\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n name=\"crm_subscription_id\" controlId=\"domain-build-crm_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_subscription_id-label'\"\n [options]=\"crmSubscriptionsList\"\n formControlName=\"crm_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n [placeholder]=\"'Select CRM Subscription'\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n </p-select>\n\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n name=\"crm_product_id\" controlId=\"domain-build-crm_product_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_product_id-label'\"\n [options]=\"crmProductList\"\n formControlName=\"crm_product_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n [placeholder]=\"'Select CRM Product'\"\n optionValue=\"id\"\n >\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n name=\"crm_source_id\" controlId=\"domain-build-crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_source_id-label'\"\n [options]=\"crmSourcesList\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n [placeholder]=\"'Select CRM Source'\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <!-- crm subscription fields end-->\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\" controlId=\"domain-build-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-active-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"active\" name=\"active\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n name=\"is_product_domain\" controlId=\"domain-build-is_product_domain\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-is_product_domain-label'\"\n uncheckedLabel=\"false\"\n checkedLabel=\"true\"\n formControlName=\"is_product_domain\"\n name=\"is_product_domain\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n name=\"can_register_through_main_page\" controlId=\"domain-build-can_register_through_main_page\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-can_register_through_main_page-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"can_register_through_main_page\"\n name=\"can_register_through_main_page\" [ngClass]=\"{\n 'is-invalid': submitted && f['can_register_through_main_page'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\" controlId=\"domain-build-social_login_enabled\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-social_login_enabled-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"social_login_enabled\"\n name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\" controlId=\"domain-build-notify_logins\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-notify_logins-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"notify_logins\"\n name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n\n <div class=\"my-5\">\n <h3>Pre-Built Pages Config (Resources, Landing Pages, etc)</h3>\n\n <p-accordion class=\"mt-5\">\n <p-accordionTab [header]=\"'Instructions - README FIRST'\">\n <div class=\"mb-3\">\n <p>We've built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n UIs for onboarding users.</p>\n <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n appear in the <strong>Admin > Users section</strong>.</p>\n <p>Once you've selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n <strong>/join/trial3</strong>.</p>\n <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n out.</p>\n </div>\n </p-accordionTab>\n\n <p-accordionTab [header]=\"'Subscribe to Product/Newsletter Config'\">\n <div class=\"mb-3\">\n <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n /join/trial2, etc.</p>\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n <!-- live page link -->\n <div class=\"text-end\" *ngIf=\"shardUrl\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle\"></i>\n </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n </div>\n <div class=\"row\">\n <div class=\"col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\" controlId=\"domain-build-trial_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete [attr.aria-labelledby]=\"'domain-build-trial_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" field=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n placeholder=\"Search Product\" [inputStyle]=\"\n form.get('trial_product_id').touched &&\n form.get('trial_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : { border: '1px solid gray' }\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\" controlId=\"domain-build-trial_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n \">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_crm_source_id-label'\" formControlName=\"trial_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\" controlId=\"domain-build-trial_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n \">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_pdf_source_id-label'\" formControlName=\"trial_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\" controlId=\"domain-build-trial_video_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-trial_video_url\" class=\"form-control\" formControlName=\"trial_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\" controlId=\"domain-build-trial_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n \">\n <input type=\"text\" id=\"domain-build-trial_book_demo_url\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_book_demo_url'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\" controlId=\"domain-build-trial_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n \">\n <textarea id=\"domain-build-trial_cta_iframe\" rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_cta_iframe'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\" controlId=\"domain-build-trial_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n \">\n <textarea id=\"domain-build-trial_join_message\" rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_join_message'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\" controlId=\"domain-build-trial_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-trial_pdf_download_text\" rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_pdf_download_text'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image-label\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image2-label\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_pdf_image-label\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg-label\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg2-label\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordionTab>\n\n <p-accordionTab [header]=\"'Header Section'\">\n <div class=\"row mt-4\" formGroupName=\"header\">\n <h4 class=\"mb-4\">Header Section</h4>\n\n <!-- Headline -->\n <div class=\"col-12 col-md-12\">\n <pw-input-container label=\"Header Headline\" name=\"headline\" controlId=\"domain-build-header-headline\">\n <input type=\"text\" id=\"domain-build-header-headline\" class=\"form-control\" formControlName=\"headline\" />\n </pw-input-container>\n </div>\n\n <!-- Video URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Video URL\" name=\"video_url\" controlId=\"domain-build-header-video_url\">\n <input type=\"text\" id=\"domain-build-header-video_url\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <!-- Background Image URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\" controlId=\"domain-build-header-bg_image_url\">\n <input type=\"text\" id=\"domain-build-header-bg_image_url\" class=\"form-control\" formControlName=\"bg_image_url\" />\n </pw-input-container>\n </div>\n\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Header Description\" name=\"description\" controlId=\"domain-build-header-description\">\n <textarea\n id=\"domain-build-header-description\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n ></textarea>\n </pw-input-container>\n </div>\n\n <!-- Sub Headings -->\n <div formArrayName=\"sub_headings\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(headerSubHeadings, $event)\">\n <div\n *ngFor=\"let sub of f['header'].get('sub_headings')['controls']; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-10\">\n <pw-input-container label=\"Sub Header Description\" name=\"description\" [controlId]=\"'domain-build-header-sub_description-' + i\">\n <textarea\n [id]=\"'domain-build-header-sub_description-' + i\"\n class=\"form-control\"\n rows=\"3\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n ></textarea>\n </pw-input-container>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeHeaderSubHeading(i)\"\n (keydown.enter)=\"removeHeaderSubHeading(i)\"\n (keydown.space)=\"removeHeaderSubHeading(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\">\n + Add Sub Heading\n </button>\n </div>\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Resources Section'\">\n <div class=\"row row mt-4 mb-4\">\n <h4 class=\"mb-3\">Resources Section</h4>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\" controlId=\"domain-build-resources_tagline\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n <input type=\"text\" id=\"domain-build-resources_tagline\" class=\"form-control\" formControlName=\"resources_tagline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\" controlId=\"domain-build-resources_description\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n <textarea id=\"domain-build-resources_description\" class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-resource_image-label\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordionTab>\n\n <p-accordionTab [header]=\"'Unique Selling Proposition Section (USP) '\">\n <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Title\" name=\"title\" controlId=\"domain-build-usps-title\">\n <input type=\"text\" id=\"domain-build-usps-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Video Url\" name=\"video_url\" controlId=\"domain-build-usps-video_url\">\n <input type=\"text\" id=\"domain-build-usps-video_url\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container label=\"USPs Description\" name=\"description\" controlId=\"domain-build-usps-description\">\n <textarea id=\"domain-build-usps-description\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <!-- USP Items -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(uspsItems, $event)\">\n <div\n *ngFor=\"let item of f['usps'].get('items')['controls']; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-10\">\n <pw-input-container label=\"Item Description\" name=\"description\" [controlId]=\"'domain-build-usps-item-desc-' + i\">\n <textarea [id]=\"'domain-build-usps-item-desc-' + i\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeUspItem(i)\"\n (keydown.enter)=\"removeUspItem(i)\"\n (keydown.space)=\"removeUspItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n + Add USP Item\n </button>\n </div>\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Partners (Clients) Section'\">\n <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n\n <!-- Title -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Partner Title\" name=\"title\" controlId=\"domain-build-partners-title\">\n <input type=\"text\" id=\"domain-build-partners-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Partners Description\" name=\"description\" controlId=\"domain-build-partners-description\">\n <textarea id=\"domain-build-partners-description\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <!-- Partner Items with Drag Support -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(partnersItems, $event)\">\n <div\n *ngFor=\"let item of partnersItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <!-- Name -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" class=\"col-12\" name=\"name\" [controlId]=\"'domain-build-partner-name-' + i\">\n <input [id]=\"'domain-build-partner-name-' + i\" class=\"form-control\" formControlName=\"name\" />\n </pw-input-container>\n </div>\n\n <!-- Blog URL + Drag Handle -->\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog Url\" name=\"blog_url\" [controlId]=\"'domain-build-partner-blog_url-' + i\">\n <input [id]=\"'domain-build-partner-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n\n <!-- Video URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Video Url\" name=\"video_url\" [controlId]=\"'domain-build-partner-video_url-' + i\">\n <input [id]=\"'domain-build-partner-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <!-- Image URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Image Url\" name=\"image_url\" [controlId]=\"'domain-build-partner-image_url-' + i\">\n <input [id]=\"'domain-build-partner-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n </div>\n\n <!-- Delete Icon -->\n <div class=\"col-md-12 text-end mt-2\">\n <i\n ngbTooltip=\"Remove\"\n (click)=\"removePartnerItem(i)\"\n (keydown.enter)=\"removePartnerItem(i)\"\n (keydown.space)=\"removePartnerItem(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <!-- Add New Partner -->\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Testimonials Section'\">\n <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n <h4 class=\"mb-4\">Testimonials Section</h4>\n\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\" controlId=\"domain-build-testimonials-title\">\n <input type=\"text\" id=\"domain-build-testimonials-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\" controlId=\"domain-build-testimonials-description\">\n <textarea id=\"domain-build-testimonials-description\" rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <!-- Items List -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(testimonialsItems, $event)\">\n <div\n *ngFor=\"let item of testimonialsItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" name=\"name\" [controlId]=\"'domain-build-testimonial-name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-name-' + i\" class=\"form-control\" formControlName=\"name\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-testimonial-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-testimonial-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-testimonial-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Testimonial\" class=\"col-md-10\" name=\"testimonial\" [controlId]=\"'domain-build-testimonial-text-' + i\">\n <textarea [id]=\"'domain-build-testimonial-text-' + i\" class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"></textarea>\n </pw-input-container>\n\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n ngbTooltip=\"Remove\"\n (click)=\"removeTestimonialItem(i)\"\n (keydown.enter)=\"removeTestimonialItem(i)\"\n (keydown.space)=\"removeTestimonialItem(i)\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">\n + Add Testimonial\n </button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n <p-accordionTab [header]=\"'Video Section'\">\n <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n <h4 class=\"mb-3\">Video Section</h4>\n\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\" controlId=\"domain-build-videos-title\">\n <input type=\"text\" id=\"domain-build-videos-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\" controlId=\"domain-build-videos-description\">\n <textarea id=\"domain-build-videos-description\" rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <!-- Video Items -->\n <div\n formArrayName=\"items\"\n class=\"col-12 mt-3\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(videosItems, $event)\"\n >\n <div\n *ngFor=\"let item of videosItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" [controlId]=\"'domain-build-video-item-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-video-item-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-video-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-video-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-md-10\" name=\"description\" [controlId]=\"'domain-build-video-item-description-' + i\">\n <textarea [id]=\"'domain-build-video-item-description-' + i\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeVideoItem(i)\"\n (keydown.enter)=\"removeVideoItem(i)\"\n (keydown.space)=\"removeVideoItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">\n + Add Video\n </button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Call to Actions Section (CTAs)'\">\n <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n <h4 class=\"mb-4\">CTAs Section</h4>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-ctas-title\">\n <input type=\"text\" id=\"domain-build-ctas-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" controlId=\"domain-build-ctas-image_url\">\n <input type=\"text\" id=\"domain-build-ctas-image_url\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" controlId=\"domain-build-ctas-button_text\">\n <input type=\"text\" id=\"domain-build-ctas-button_text\" class=\"form-control\" formControlName=\"button_text\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-ctas-description\">\n <input type=\"text\" id=\"domain-build-ctas-description\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n </div>\n\n <!-- CTA Items -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(ctasItems, $event)\">\n <div\n *ngFor=\"let item of ctasItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" [controlId]=\"'domain-build-cta-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Cta URL\" name=\"cta_url\" [controlId]=\"'domain-build-cta-item-cta_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-cta_url-' + i\" class=\"form-control\" formControlName=\"cta_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Video URL\" name=\"video_url\" [controlId]=\"'domain-build-cta-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Title\" name=\"title\" [controlId]=\"'domain-build-cta-item-title-' + i\">\n <input [id]=\"'domain-build-cta-item-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Description\" name=\"description\" [controlId]=\"'domain-build-cta-item-description-' + i\">\n <input [id]=\"'domain-build-cta-item-description-' + i\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-5\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" [controlId]=\"'domain-build-cta-item-button_text-' + i\">\n <input [id]=\"'domain-build-cta-item-button_text-' + i\" class=\"form-control\" formControlName=\"button_text\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-1 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeCtasItem(i)\"\n (keydown.enter)=\"removeCtasItem(i)\"\n (keydown.space)=\"removeCtasItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n <p-accordionTab [header]=\"'Integrations Section'\">\n <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n <h4 class=\"mb-3\">Integrations Section</h4>\n\n <pw-input-container label=\"Title\" class=\"col-12\" name=\"title\" controlId=\"domain-build-integrations-title\">\n <input type=\"text\" id=\"domain-build-integrations-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"description\" controlId=\"domain-build-integrations-description\">\n <textarea id=\"domain-build-integrations-description\" class=\"form-control\" formControlName=\"description\" rows=\"3\"></textarea>\n </pw-input-container>\n\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(integrationsItems, $event)\">\n <div\n *ngFor=\"let item of integrationsItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 rounded bg-light\"\n cdkDrag\n >\n <pw-input-container label=\"Title\" class=\"col-md-6\" name=\"title\" [controlId]=\"'domain-build-integration-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Description\" name=\"description\" [controlId]=\"'domain-build-integration-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-description-' + i\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"Blog URL\" class=\"col-md-6\" name=\"blog_url\" [controlId]=\"'domain-build-integration-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-integration-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-integration-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n\n <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n <i\n class=\"fa fa-trash delete-icon align-self-center\"\n (click)=\"removeIntegrationItem(i)\"\n (keydown.enter)=\"removeIntegrationItem(i)\"\n (keydown.space)=\"removeIntegrationItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Contact Us Section'\">\n <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n <h4 class=\"mb-3\">Contact Us Section</h4>\n\n <pw-input-container label=\"Url\" class=\"col-md-6\" name=\"url\" controlId=\"domain-build-contact_us-url\">\n <input type=\"text\" id=\"domain-build-contact_us-url\" class=\"form-control\" formControlName=\"url\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\" controlId=\"domain-build-contact_us-description\">\n <textarea id=\"domain-build-contact_us-description\" rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <div formArrayName=\"questions\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsQuestions, $event)\">\n <div\n *ngFor=\"let questionGroup of contactUsQuestions.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3\"\n cdkDrag\n >\n <pw-input-container label=\"Question\" class=\"col-md-10\" name=\"question\" [controlId]=\"'domain-build-contact_us-question-' + i\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-question-' + i\" class=\"form-control\" formControlName=\"question\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsQuestion(i)\"\n (keydown.enter)=\"removeContactUsQuestion(i)\"\n (keydown.space)=\"removeContactUsQuestion(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-12 mt-3\" formArrayName=\"options\" cdkDropList [cdkDropListData]=\"getQuestionOptions(i).controls\" (cdkDropListDropped)=\"dropContactUsOptions(i, $event)\">\n <div\n class=\"row align-items-center mb-2 border p-3\"\n *ngFor=\"let option of getQuestionOptions(i).controls; let j = index\"\n [formGroupName]=\"j\"\n cdkDrag\n >\n <pw-input-container label=\"Option\" class=\"col-md-10\" name=\"option\" [controlId]=\"'domain-build-contact_us-option-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-option-' + i + '-' + j\" class=\"form-control\" formControlName=\"option\" />\n </pw-input-container>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsOption(i, j)\"\n (keydown.enter)=\"removeContactUsOption(i, j)\"\n (keydown.space)=\"removeContactUsOption(i, j)\"\n ngbTooltip=\"Remove Option\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder option\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\">\n + Add Option\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"text-start mt-3\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">\n + Add Question\n </button>\n </div>\n </div>\n\n <div formArrayName=\"hubspot\" class=\"col-12 mt-4\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsHubspotItems, $event)\">\n <h5 class=\"mb-4\">Hubspot Embeds</h5>\n\n <div\n *ngFor=\"let hub of contactUsHubspotItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-2\"\n cdkDrag\n >\n <pw-input-container label=\"ID\" class=\"col-md-5\" name=\"id\" [controlId]=\"'domain-build-hubspot-id-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-id-' + i\" class=\"form-control\" formControlName=\"id\" />\n </pw-input-container>\n\n <pw-input-container label=\"Position\" class=\"col-md-6\" name=\"position\" [controlId]=\"'domain-build-hubspot-position-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-position-' + i\" class=\"form-control\" formControlName=\"position\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"Div\" class=\"col-10\" name=\"div\" [controlId]=\"'domain-build-hubspot-div-' + i\">\n <textarea\n [id]=\"'domain-build-hubspot-div-' + i\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"div\"\n [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\"\n ></textarea>\n </pw-input-container>\n\n <div class=\"col-md-2 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeHubspotItem(i)\"\n (keydown.enter)=\"removeHubspotItem(i)\"\n (keydown.space)=\"removeHubspotItem(i)\"\n ngbTooltip=\"Remove Hubspot Embed\"\n aria-hidden=\"true\">\n</i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">\n + Add Hubspot Embed\n </button>\n </div>\n </div>\n\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Book a Demo Section'\">\n <div class=\"row mt-4\">\n <div class=\"col-12\">\n <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n <div formGroupName=\"book_demo\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-book_demo-title\">\n <input type=\"text\" id=\"domain-build-book_demo-title\" formControlName=\"title\" class=\"form-control\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-book_demo-description\">\n <input type=\"text\" id=\"domain-build-book_demo-description\" formControlName=\"description\" class=\"form-control\" />\n </pw-input-container>\n\n <div formArrayName=\"items\" cdkDropList (cdkDropListDropped)=\"dropBookDemoLinks($event)\">\n <div\n *ngFor=\"let link of f['book_demo'].get('items')['controls']; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link Title\" name=\"title\" [controlId]=\"'domain-build-book_demo-link-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link URL\" name=\"url\" [controlId]=\"'domain-build-book_demo-link-url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-url-' + i\" class=\"form-control\" formControlName=\"url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n ngbTooltip=\"Remove\"\n (click)=\"removeBookDemoLink(i)\"\n (keydown.enter)=\"removeBookDemoLink(i)\"\n (keydown.space)=\"removeBookDemoLink(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">\n + Add Book Demo Link\n </button>\n </div>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Navbar Section'\">\n <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n <h4 class=\"mb-3\">Navbar Section</h4>\n\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(navbarItems, $event)\">\n <div\n *ngFor=\"let item of navbarItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-navbar-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-navbar-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-path-' + i\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeNavbarItem(i)\"\n (keydown.enter)=\"removeNavbarItem(i)\"\n (keydown.space)=\"removeNavbarItem(i)\"\n ngbTooltip=\"Remove Navbar Item\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getNavbarSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\"\n >\n <div\n *ngFor=\"let sub of getNavbarSubtitles(i).controls; let j = index\"\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeSubtitle(i, j)\"\n (keydown.enter)=\"removeSubtitle(i, j)\"\n (keydown.space)=\"removeSubtitle(i, j)\"\n ngbTooltip=\"Remove Subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n + Add Subtitle\n </button>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">\n + Add Navbar Item\n </button>\n </div>\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Footer Links Section'\">\n <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n <h4 class=\"mb-3\">Footer Links Section</h4>\n\n <div\n formArrayName=\"items\"\n class=\"col-12\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(footerLinksItems, $event)\"\n >\n <div\n *ngFor=\"let item of footerLinksItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-footer-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-footer-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-path-' + i\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterLinkItem(i)\"\n (keydown.enter)=\"removeFooterLinkItem(i)\"\n (keydown.space)=\"removeFooterLinkItem(i)\"\n ngbTooltip=\"Remove Footer Item\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n </div>\n\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getFooterSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropFooterSubtitles(i, $event)\"\n >\n <div\n *ngFor=\"let sub of getFooterSubtitles(i).controls; let j = index\"\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n </div>\n\n\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterSubtitle(i, j)\"\n (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n (keydown.space)=\"removeFooterSubtitle(i, j)\"\n ngbTooltip=\"Remove Subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"btn btn-sm btn-primary mt-2\"\n (click)=\"addFooterSubtitle(i)\"\n >\n + Add Subtitle\n </button>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"btn btn-primary mt-2 mb-2\"\n (click)=\"addFooterLinkItem()\"\n >\n + Add Footer Link\n </button>\n </div>\n </div>\n </p-accordionTab>\n\n\n\n\n\n <p-accordionTab [header]=\"'Guides Section'\">\n <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n <h4 class=\"mb-3\">Guides Section</h4>\n\n <div formArrayName=\"items\" class=\"col-12\">\n <div cdkDropList (cdkDropListDropped)=\"dropItems(guidesItems, $event)\">\n <div\n *ngFor=\"let item of guidesItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"border p-3 mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-start\">\n\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-guide-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Button Text\" class=\"col-md-6\" name=\"button_text\" [controlId]=\"'domain-build-guide-button_text-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-button_text-' + i\" class=\"form-control\" formControlName=\"button_text\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"row mt-2\">\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-guide-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Guide URL\" class=\"col-md-6\" name=\"guide_url\" [controlId]=\"'domain-build-guide-guide_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-guide_url-' + i\" class=\"form-control\" formControlName=\"guide_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"row mt-2\">\n <pw-input-container label=\"Description\" class=\"col-md-11\" name=\"description\" [controlId]=\"'domain-build-guide-description-' + i\">\n <textarea\n [id]=\"'domain-build-guide-description-' + i\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n ></textarea>\n </pw-input-container>\n\n <div class=\"col-md-1 d-flex align-items-start justify-content-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeGuideItem(i)\"\n (keydown.enter)=\"removeGuideItem(i)\"\n (keydown.space)=\"removeGuideItem(i)\"\n ngbTooltip=\"Remove Guide\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">\n + Add Guide\n </button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n\n\n <p-accordionTab [header]=\"'AB Tests Section'\">\n <div class=\"row mt-3 mb-4\">\n <h4 class=\"mb-3\">AB Tests</h4>\n <div formArrayName=\"ab_tests\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(abTests, $event)\">\n <div\n *ngFor=\"let abTest of abTests.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3\"\n cdkDrag\n >\n <pw-input-container label=\"Description\" class=\"col-md-5\" name=\"description\" [controlId]=\"'domain-build-ab_test-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-description-' + i\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n\n <pw-input-container label=\"Experiment Name\" class=\"col-md-6\" name=\"experiment_name\" [controlId]=\"'domain-build-ab_test-experiment_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-experiment_name-' + i\" class=\"form-control\" formControlName=\"experiment_name\" />\n </pw-input-container>\n\n\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"DB Shard\" class=\"col-md-6\" name=\"db_shard\" [controlId]=\"'domain-build-ab_test-db_shard-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-db_shard-' + i\" class=\"form-control\" formControlName=\"db_shard\" />\n </pw-input-container>\n\n <pw-input-container label=\"Microservice Name\" class=\"col-md-6\" name=\"microservice_name\" [controlId]=\"'domain-build-ab_test-microservice_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-microservice_name-' + i\" class=\"form-control\" formControlName=\"microservice_name\" />\n </pw-input-container>\n\n <div class=\"col-md-12 text-end mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeAbTest(i)\"\n (keydown.enter)=\"removeAbTest(i)\"\n (keydown.space)=\"removeAbTest(i)\"\n ngbTooltip=\"Remove AB Test\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addAbTest()\">+ Add AB Test</button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n\n\n\n\n <p-accordionTab [header]=\"'Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)'\">\n <div class=\"mb-3\">\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n <div class=\"text-end\" *ngIf=\"shardUrl\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle\"></i>\n </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n </div>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\" controlId=\"domain-build-cs_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete [attr.aria-labelledby]=\"'domain-build-cs_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" field=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n placeholder=\"Search Product\" [inputStyle]=\"\n form.get('cs_product_id').touched &&\n form.get('cs_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : { border: '1px solid gray' }\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\" controlId=\"domain-build-cs_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_crm_source_id-label'\" formControlName=\"cs_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\" controlId=\"domain-build-cs_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_pdf_source_id-label'\" formControlName=\"cs_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" controlId=\"domain-build-cs_video_url\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_video_url\" class=\"form-control\" formControlName=\"cs_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\" controlId=\"domain-build-cs_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_book_demo_url\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\" controlId=\"domain-build-cs_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n <textarea id=\"domain-build-cs_cta_iframe\" class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\" controlId=\"domain-build-cs_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n <textarea id=\"domain-build-cs_join_message\" class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\" controlId=\"domain-build-cs_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-cs_pdf_download_text\" class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['cs_pdf_download_text'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image-label\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image2-label\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_pdf_image-label\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg-label\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg2-label\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordionTab>\n </p-accordion>\n </div>\n\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n </div>\n </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n\n\n<ng-template #partnerCropper let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Partner Image</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n <pw-image-cropper\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n (closeEvent)=\"onClosePartnerModal()\"\n ></pw-image-cropper>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i7.AccordionTab, selector: "p-accordionTab, p-accordion-tab, p-accordiontab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "component", type: i5$1.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", 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", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i3.Select, selector: "p-select", 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", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i13.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i13.CustomUploaderComponent, selector: "pw-custom-uploader", inputs: ["controlName", "previewData", "aspectRatio", "title"], outputs: ["saveEvent"] }, { kind: "component", type: i1$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i1$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
|
|
1386
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: DomainConfigBuildComponent, isStandalone: false, selector: "pw-domain-config-build", viewQueries: [{ propertyName: "partnerCropper", first: true, predicate: ["partnerCropper"], descendants: true }, { propertyName: "uploader", predicate: CustomUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n <p> The following parameters and settings will be applied to all public pages of this domain. </p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"!isLoading && data?.host_name\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscription' | transloco\"\n name=\"master_subscription_id\" controlId=\"domain-build-master_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_id-label'\"\n [options]=\"masterSubscriptionsList\"\n formControlName=\"master_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n placeholder=\"Select Master Subscription\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n \"\n name=\"master_subscription_product_id\" controlId=\"domain-build-master_subscription_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_product_id-label'\"\n [options]=\"masterSubscriptionProductList\"\n formControlName=\"master_subscription_product_id\"\n [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n [placeholder]=\"'Select Master Product'\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n name=\"blog_feature_key\" controlId=\"domain-build-blog_feature_key\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n <input type=\"text\"\n id=\"domain-build-blog_feature_key\"\n class=\"form-control\"\n formControlName=\"blog_feature_key\"\n [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n name=\"main_tos_id\" controlId=\"domain-build-main_tos_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-main_tos_id-label'\"\n [options]=\"subscriptionTosList\"\n formControlName=\"main_tos_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n [placeholder]=\"'Select Main TOS'\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n </p-select>\n\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n name=\"crm_subscription_id\" controlId=\"domain-build-crm_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_subscription_id-label'\"\n [options]=\"crmSubscriptionsList\"\n formControlName=\"crm_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n [placeholder]=\"'Select CRM Subscription'\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n </p-select>\n\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n name=\"crm_product_id\" controlId=\"domain-build-crm_product_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_product_id-label'\"\n [options]=\"crmProductList\"\n formControlName=\"crm_product_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n [placeholder]=\"'Select CRM Product'\"\n optionValue=\"id\"\n >\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n name=\"crm_source_id\" controlId=\"domain-build-crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_source_id-label'\"\n [options]=\"crmSourcesList\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n [placeholder]=\"'Select CRM Source'\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <!-- crm subscription fields end-->\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\" controlId=\"domain-build-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-active-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"active\" name=\"active\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n name=\"is_product_domain\" controlId=\"domain-build-is_product_domain\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-is_product_domain-label'\"\n uncheckedLabel=\"false\"\n checkedLabel=\"true\"\n formControlName=\"is_product_domain\"\n name=\"is_product_domain\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n name=\"can_register_through_main_page\" controlId=\"domain-build-can_register_through_main_page\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-can_register_through_main_page-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"can_register_through_main_page\"\n name=\"can_register_through_main_page\" [ngClass]=\"{\n 'is-invalid': submitted && f['can_register_through_main_page'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\" controlId=\"domain-build-social_login_enabled\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-social_login_enabled-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"social_login_enabled\"\n name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\" controlId=\"domain-build-notify_logins\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-notify_logins-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"notify_logins\"\n name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n\n <div class=\"my-5\">\n <h3>Pre-Built Pages Config (Resources, Landing Pages, etc)</h3>\n\n <p-accordion class=\"mt-5\">\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Instructions - README FIRST</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>We've built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n UIs for onboarding users.</p>\n <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n appear in the <strong>Admin > Users section</strong>.</p>\n <p>Once you've selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n <strong>/join/trial3</strong>.</p>\n <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n out.</p>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n <p-accordion-panel value=\"1\">\n <p-accordion-header>Subscribe to Product/Newsletter Config</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n /join/trial2, etc.</p>\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n <!-- live page link -->\n <div class=\"text-end\" *ngIf=\"shardUrl\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle\"></i>\n </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n </div>\n <div class=\"row\">\n <div class=\"col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\" controlId=\"domain-build-trial_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete [attr.aria-labelledby]=\"'domain-build-trial_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" field=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n placeholder=\"Search Product\" [inputStyle]=\"\n form.get('trial_product_id').touched &&\n form.get('trial_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : { border: '1px solid gray' }\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\" controlId=\"domain-build-trial_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n \">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_crm_source_id-label'\" formControlName=\"trial_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\" controlId=\"domain-build-trial_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n \">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_pdf_source_id-label'\" formControlName=\"trial_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\" controlId=\"domain-build-trial_video_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-trial_video_url\" class=\"form-control\" formControlName=\"trial_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\" controlId=\"domain-build-trial_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n \">\n <input type=\"text\" id=\"domain-build-trial_book_demo_url\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_book_demo_url'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\" controlId=\"domain-build-trial_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n \">\n <textarea id=\"domain-build-trial_cta_iframe\" rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_cta_iframe'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\" controlId=\"domain-build-trial_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n \">\n <textarea id=\"domain-build-trial_join_message\" rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_join_message'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\" controlId=\"domain-build-trial_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-trial_pdf_download_text\" rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_pdf_download_text'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image-label\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image2-label\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_pdf_image-label\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg-label\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg2-label\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n <p-accordion-panel value=\"2\">\n <p-accordion-header>Header Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4\" formGroupName=\"header\">\n <h4 class=\"mb-4\">Header Section</h4>\n\n <!-- Headline -->\n <div class=\"col-12 col-md-12\">\n <pw-input-container label=\"Header Headline\" name=\"headline\" controlId=\"domain-build-header-headline\">\n <input type=\"text\" id=\"domain-build-header-headline\" class=\"form-control\" formControlName=\"headline\" />\n </pw-input-container>\n </div>\n\n <!-- Video URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Video URL\" name=\"video_url\" controlId=\"domain-build-header-video_url\">\n <input type=\"text\" id=\"domain-build-header-video_url\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <!-- Background Image URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\" controlId=\"domain-build-header-bg_image_url\">\n <input type=\"text\" id=\"domain-build-header-bg_image_url\" class=\"form-control\" formControlName=\"bg_image_url\" />\n </pw-input-container>\n </div>\n\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Header Description\" name=\"description\" controlId=\"domain-build-header-description\">\n <textarea\n id=\"domain-build-header-description\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n ></textarea>\n </pw-input-container>\n </div>\n\n <!-- Sub Headings -->\n <div formArrayName=\"sub_headings\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(headerSubHeadings, $event)\">\n <div\n *ngFor=\"let sub of f['header'].get('sub_headings')['controls']; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-10\">\n <pw-input-container label=\"Sub Header Description\" name=\"description\" [controlId]=\"'domain-build-header-sub_description-' + i\">\n <textarea\n [id]=\"'domain-build-header-sub_description-' + i\"\n class=\"form-control\"\n rows=\"3\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n ></textarea>\n </pw-input-container>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeHeaderSubHeading(i)\"\n (keydown.enter)=\"removeHeaderSubHeading(i)\"\n (keydown.space)=\"removeHeaderSubHeading(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\">\n + Add Sub Heading\n </button>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"3\">\n <p-accordion-header>Resources Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row row mt-4 mb-4\">\n <h4 class=\"mb-3\">Resources Section</h4>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\" controlId=\"domain-build-resources_tagline\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n <input type=\"text\" id=\"domain-build-resources_tagline\" class=\"form-control\" formControlName=\"resources_tagline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\" controlId=\"domain-build-resources_description\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n <textarea id=\"domain-build-resources_description\" class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-resource_image-label\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n <p-accordion-panel value=\"4\">\n <p-accordion-header>Unique Selling Proposition Section (USP)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Title\" name=\"title\" controlId=\"domain-build-usps-title\">\n <input type=\"text\" id=\"domain-build-usps-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Video Url\" name=\"video_url\" controlId=\"domain-build-usps-video_url\">\n <input type=\"text\" id=\"domain-build-usps-video_url\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container label=\"USPs Description\" name=\"description\" controlId=\"domain-build-usps-description\">\n <textarea id=\"domain-build-usps-description\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <!-- USP Items -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(uspsItems, $event)\">\n <div\n *ngFor=\"let item of f['usps'].get('items')['controls']; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-10\">\n <pw-input-container label=\"Item Description\" name=\"description\" [controlId]=\"'domain-build-usps-item-desc-' + i\">\n <textarea [id]=\"'domain-build-usps-item-desc-' + i\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeUspItem(i)\"\n (keydown.enter)=\"removeUspItem(i)\"\n (keydown.space)=\"removeUspItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n + Add USP Item\n </button>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"5\">\n <p-accordion-header>Partners (Clients) Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n\n <!-- Title -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Partner Title\" name=\"title\" controlId=\"domain-build-partners-title\">\n <input type=\"text\" id=\"domain-build-partners-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Partners Description\" name=\"description\" controlId=\"domain-build-partners-description\">\n <textarea id=\"domain-build-partners-description\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <!-- Partner Items with Drag Support -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(partnersItems, $event)\">\n <div\n *ngFor=\"let item of partnersItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <!-- Name -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" class=\"col-12\" name=\"name\" [controlId]=\"'domain-build-partner-name-' + i\">\n <input [id]=\"'domain-build-partner-name-' + i\" class=\"form-control\" formControlName=\"name\" />\n </pw-input-container>\n </div>\n\n <!-- Blog URL + Drag Handle -->\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog Url\" name=\"blog_url\" [controlId]=\"'domain-build-partner-blog_url-' + i\">\n <input [id]=\"'domain-build-partner-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n\n <!-- Video URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Video Url\" name=\"video_url\" [controlId]=\"'domain-build-partner-video_url-' + i\">\n <input [id]=\"'domain-build-partner-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <!-- Image URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Image Url\" name=\"image_url\" [controlId]=\"'domain-build-partner-image_url-' + i\">\n <input [id]=\"'domain-build-partner-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n </div>\n\n <!-- Delete Icon -->\n <div class=\"col-md-12 text-end mt-2\">\n <i\n ngbTooltip=\"Remove\"\n (click)=\"removePartnerItem(i)\"\n (keydown.enter)=\"removePartnerItem(i)\"\n (keydown.space)=\"removePartnerItem(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <!-- Add New Partner -->\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"6\">\n <p-accordion-header>Testimonials Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n <h4 class=\"mb-4\">Testimonials Section</h4>\n\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\" controlId=\"domain-build-testimonials-title\">\n <input type=\"text\" id=\"domain-build-testimonials-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\" controlId=\"domain-build-testimonials-description\">\n <textarea id=\"domain-build-testimonials-description\" rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <!-- Items List -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(testimonialsItems, $event)\">\n <div\n *ngFor=\"let item of testimonialsItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" name=\"name\" [controlId]=\"'domain-build-testimonial-name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-name-' + i\" class=\"form-control\" formControlName=\"name\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-testimonial-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-testimonial-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-testimonial-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Testimonial\" class=\"col-md-10\" name=\"testimonial\" [controlId]=\"'domain-build-testimonial-text-' + i\">\n <textarea [id]=\"'domain-build-testimonial-text-' + i\" class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"></textarea>\n </pw-input-container>\n\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n ngbTooltip=\"Remove\"\n (click)=\"removeTestimonialItem(i)\"\n (keydown.enter)=\"removeTestimonialItem(i)\"\n (keydown.space)=\"removeTestimonialItem(i)\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">\n + Add Testimonial\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n <p-accordion-panel value=\"7\">\n <p-accordion-header>Video Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n <h4 class=\"mb-3\">Video Section</h4>\n\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\" controlId=\"domain-build-videos-title\">\n <input type=\"text\" id=\"domain-build-videos-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\" controlId=\"domain-build-videos-description\">\n <textarea id=\"domain-build-videos-description\" rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <!-- Video Items -->\n <div\n formArrayName=\"items\"\n class=\"col-12 mt-3\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(videosItems, $event)\"\n >\n <div\n *ngFor=\"let item of videosItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" [controlId]=\"'domain-build-video-item-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-video-item-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-video-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-video-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-md-10\" name=\"description\" [controlId]=\"'domain-build-video-item-description-' + i\">\n <textarea [id]=\"'domain-build-video-item-description-' + i\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeVideoItem(i)\"\n (keydown.enter)=\"removeVideoItem(i)\"\n (keydown.space)=\"removeVideoItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">\n + Add Video\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"8\">\n <p-accordion-header>Call to Actions Section (CTAs)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n <h4 class=\"mb-4\">CTAs Section</h4>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-ctas-title\">\n <input type=\"text\" id=\"domain-build-ctas-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" controlId=\"domain-build-ctas-image_url\">\n <input type=\"text\" id=\"domain-build-ctas-image_url\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" controlId=\"domain-build-ctas-button_text\">\n <input type=\"text\" id=\"domain-build-ctas-button_text\" class=\"form-control\" formControlName=\"button_text\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-ctas-description\">\n <input type=\"text\" id=\"domain-build-ctas-description\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n </div>\n\n <!-- CTA Items -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(ctasItems, $event)\">\n <div\n *ngFor=\"let item of ctasItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" [controlId]=\"'domain-build-cta-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Cta URL\" name=\"cta_url\" [controlId]=\"'domain-build-cta-item-cta_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-cta_url-' + i\" class=\"form-control\" formControlName=\"cta_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Video URL\" name=\"video_url\" [controlId]=\"'domain-build-cta-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Title\" name=\"title\" [controlId]=\"'domain-build-cta-item-title-' + i\">\n <input [id]=\"'domain-build-cta-item-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Description\" name=\"description\" [controlId]=\"'domain-build-cta-item-description-' + i\">\n <input [id]=\"'domain-build-cta-item-description-' + i\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-5\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" [controlId]=\"'domain-build-cta-item-button_text-' + i\">\n <input [id]=\"'domain-build-cta-item-button_text-' + i\" class=\"form-control\" formControlName=\"button_text\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-1 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeCtasItem(i)\"\n (keydown.enter)=\"removeCtasItem(i)\"\n (keydown.space)=\"removeCtasItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n <p-accordion-panel value=\"9\">\n <p-accordion-header>Integrations Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n <h4 class=\"mb-3\">Integrations Section</h4>\n\n <pw-input-container label=\"Title\" class=\"col-12\" name=\"title\" controlId=\"domain-build-integrations-title\">\n <input type=\"text\" id=\"domain-build-integrations-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"description\" controlId=\"domain-build-integrations-description\">\n <textarea id=\"domain-build-integrations-description\" class=\"form-control\" formControlName=\"description\" rows=\"3\"></textarea>\n </pw-input-container>\n\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(integrationsItems, $event)\">\n <div\n *ngFor=\"let item of integrationsItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 rounded bg-light\"\n cdkDrag\n >\n <pw-input-container label=\"Title\" class=\"col-md-6\" name=\"title\" [controlId]=\"'domain-build-integration-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Description\" name=\"description\" [controlId]=\"'domain-build-integration-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-description-' + i\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"Blog URL\" class=\"col-md-6\" name=\"blog_url\" [controlId]=\"'domain-build-integration-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-integration-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-integration-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n\n <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n <i\n class=\"fa fa-trash delete-icon align-self-center\"\n (click)=\"removeIntegrationItem(i)\"\n (keydown.enter)=\"removeIntegrationItem(i)\"\n (keydown.space)=\"removeIntegrationItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"10\">\n <p-accordion-header>Contact Us Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n <h4 class=\"mb-3\">Contact Us Section</h4>\n\n <pw-input-container label=\"Url\" class=\"col-md-6\" name=\"url\" controlId=\"domain-build-contact_us-url\">\n <input type=\"text\" id=\"domain-build-contact_us-url\" class=\"form-control\" formControlName=\"url\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\" controlId=\"domain-build-contact_us-description\">\n <textarea id=\"domain-build-contact_us-description\" rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <div formArrayName=\"questions\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsQuestions, $event)\">\n <div\n *ngFor=\"let questionGroup of contactUsQuestions.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3\"\n cdkDrag\n >\n <pw-input-container label=\"Question\" class=\"col-md-10\" name=\"question\" [controlId]=\"'domain-build-contact_us-question-' + i\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-question-' + i\" class=\"form-control\" formControlName=\"question\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsQuestion(i)\"\n (keydown.enter)=\"removeContactUsQuestion(i)\"\n (keydown.space)=\"removeContactUsQuestion(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-12 mt-3\" formArrayName=\"options\" cdkDropList [cdkDropListData]=\"getQuestionOptions(i).controls\" (cdkDropListDropped)=\"dropContactUsOptions(i, $event)\">\n <div\n class=\"row align-items-center mb-2 border p-3\"\n *ngFor=\"let option of getQuestionOptions(i).controls; let j = index\"\n [formGroupName]=\"j\"\n cdkDrag\n >\n <pw-input-container label=\"Option\" class=\"col-md-10\" name=\"option\" [controlId]=\"'domain-build-contact_us-option-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-option-' + i + '-' + j\" class=\"form-control\" formControlName=\"option\" />\n </pw-input-container>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsOption(i, j)\"\n (keydown.enter)=\"removeContactUsOption(i, j)\"\n (keydown.space)=\"removeContactUsOption(i, j)\"\n ngbTooltip=\"Remove Option\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder option\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\">\n + Add Option\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"text-start mt-3\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">\n + Add Question\n </button>\n </div>\n </div>\n\n <div formArrayName=\"hubspot\" class=\"col-12 mt-4\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsHubspotItems, $event)\">\n <h5 class=\"mb-4\">Hubspot Embeds</h5>\n\n <div\n *ngFor=\"let hub of contactUsHubspotItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-2\"\n cdkDrag\n >\n <pw-input-container label=\"ID\" class=\"col-md-5\" name=\"id\" [controlId]=\"'domain-build-hubspot-id-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-id-' + i\" class=\"form-control\" formControlName=\"id\" />\n </pw-input-container>\n\n <pw-input-container label=\"Position\" class=\"col-md-6\" name=\"position\" [controlId]=\"'domain-build-hubspot-position-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-position-' + i\" class=\"form-control\" formControlName=\"position\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"Div\" class=\"col-10\" name=\"div\" [controlId]=\"'domain-build-hubspot-div-' + i\">\n <textarea\n [id]=\"'domain-build-hubspot-div-' + i\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"div\"\n [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\"\n ></textarea>\n </pw-input-container>\n\n <div class=\"col-md-2 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeHubspotItem(i)\"\n (keydown.enter)=\"removeHubspotItem(i)\"\n (keydown.space)=\"removeHubspotItem(i)\"\n ngbTooltip=\"Remove Hubspot Embed\"\n aria-hidden=\"true\">\n</i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">\n + Add Hubspot Embed\n </button>\n </div>\n </div>\n\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"11\">\n <p-accordion-header>Book a Demo Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4\">\n <div class=\"col-12\">\n <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n <div formGroupName=\"book_demo\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-book_demo-title\">\n <input type=\"text\" id=\"domain-build-book_demo-title\" formControlName=\"title\" class=\"form-control\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-book_demo-description\">\n <input type=\"text\" id=\"domain-build-book_demo-description\" formControlName=\"description\" class=\"form-control\" />\n </pw-input-container>\n\n <div formArrayName=\"items\" cdkDropList (cdkDropListDropped)=\"dropBookDemoLinks($event)\">\n <div\n *ngFor=\"let link of f['book_demo'].get('items')['controls']; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link Title\" name=\"title\" [controlId]=\"'domain-build-book_demo-link-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link URL\" name=\"url\" [controlId]=\"'domain-build-book_demo-link-url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-url-' + i\" class=\"form-control\" formControlName=\"url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n ngbTooltip=\"Remove\"\n (click)=\"removeBookDemoLink(i)\"\n (keydown.enter)=\"removeBookDemoLink(i)\"\n (keydown.space)=\"removeBookDemoLink(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">\n + Add Book Demo Link\n </button>\n </div>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"12\">\n <p-accordion-header>Navbar Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n <h4 class=\"mb-3\">Navbar Section</h4>\n\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(navbarItems, $event)\">\n <div\n *ngFor=\"let item of navbarItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-navbar-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-navbar-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-path-' + i\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeNavbarItem(i)\"\n (keydown.enter)=\"removeNavbarItem(i)\"\n (keydown.space)=\"removeNavbarItem(i)\"\n ngbTooltip=\"Remove Navbar Item\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getNavbarSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\"\n >\n <div\n *ngFor=\"let sub of getNavbarSubtitles(i).controls; let j = index\"\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeSubtitle(i, j)\"\n (keydown.enter)=\"removeSubtitle(i, j)\"\n (keydown.space)=\"removeSubtitle(i, j)\"\n ngbTooltip=\"Remove Subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n + Add Subtitle\n </button>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">\n + Add Navbar Item\n </button>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"13\">\n <p-accordion-header>Footer Links Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n <h4 class=\"mb-3\">Footer Links Section</h4>\n\n <div\n formArrayName=\"items\"\n class=\"col-12\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(footerLinksItems, $event)\"\n >\n <div\n *ngFor=\"let item of footerLinksItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-footer-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-footer-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-path-' + i\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterLinkItem(i)\"\n (keydown.enter)=\"removeFooterLinkItem(i)\"\n (keydown.space)=\"removeFooterLinkItem(i)\"\n ngbTooltip=\"Remove Footer Item\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n </div>\n\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getFooterSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropFooterSubtitles(i, $event)\"\n >\n <div\n *ngFor=\"let sub of getFooterSubtitles(i).controls; let j = index\"\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n </div>\n\n\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterSubtitle(i, j)\"\n (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n (keydown.space)=\"removeFooterSubtitle(i, j)\"\n ngbTooltip=\"Remove Subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"btn btn-sm btn-primary mt-2\"\n (click)=\"addFooterSubtitle(i)\"\n >\n + Add Subtitle\n </button>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"btn btn-primary mt-2 mb-2\"\n (click)=\"addFooterLinkItem()\"\n >\n + Add Footer Link\n </button>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n\n\n\n <p-accordion-panel value=\"14\">\n <p-accordion-header>Guides Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n <h4 class=\"mb-3\">Guides Section</h4>\n\n <div formArrayName=\"items\" class=\"col-12\">\n <div cdkDropList (cdkDropListDropped)=\"dropItems(guidesItems, $event)\">\n <div\n *ngFor=\"let item of guidesItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"border p-3 mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-start\">\n\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-guide-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Button Text\" class=\"col-md-6\" name=\"button_text\" [controlId]=\"'domain-build-guide-button_text-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-button_text-' + i\" class=\"form-control\" formControlName=\"button_text\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"row mt-2\">\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-guide-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Guide URL\" class=\"col-md-6\" name=\"guide_url\" [controlId]=\"'domain-build-guide-guide_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-guide_url-' + i\" class=\"form-control\" formControlName=\"guide_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"row mt-2\">\n <pw-input-container label=\"Description\" class=\"col-md-11\" name=\"description\" [controlId]=\"'domain-build-guide-description-' + i\">\n <textarea\n [id]=\"'domain-build-guide-description-' + i\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n ></textarea>\n </pw-input-container>\n\n <div class=\"col-md-1 d-flex align-items-start justify-content-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeGuideItem(i)\"\n (keydown.enter)=\"removeGuideItem(i)\"\n (keydown.space)=\"removeGuideItem(i)\"\n ngbTooltip=\"Remove Guide\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">\n + Add Guide\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n\n <p-accordion-panel value=\"15\">\n <p-accordion-header>AB Tests Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\">\n <h4 class=\"mb-3\">AB Tests</h4>\n <div formArrayName=\"ab_tests\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(abTests, $event)\">\n <div\n *ngFor=\"let abTest of abTests.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3\"\n cdkDrag\n >\n <pw-input-container label=\"Description\" class=\"col-md-5\" name=\"description\" [controlId]=\"'domain-build-ab_test-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-description-' + i\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n\n <pw-input-container label=\"Experiment Name\" class=\"col-md-6\" name=\"experiment_name\" [controlId]=\"'domain-build-ab_test-experiment_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-experiment_name-' + i\" class=\"form-control\" formControlName=\"experiment_name\" />\n </pw-input-container>\n\n\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"DB Shard\" class=\"col-md-6\" name=\"db_shard\" [controlId]=\"'domain-build-ab_test-db_shard-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-db_shard-' + i\" class=\"form-control\" formControlName=\"db_shard\" />\n </pw-input-container>\n\n <pw-input-container label=\"Microservice Name\" class=\"col-md-6\" name=\"microservice_name\" [controlId]=\"'domain-build-ab_test-microservice_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-microservice_name-' + i\" class=\"form-control\" formControlName=\"microservice_name\" />\n </pw-input-container>\n\n <div class=\"col-md-12 text-end mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeAbTest(i)\"\n (keydown.enter)=\"removeAbTest(i)\"\n (keydown.space)=\"removeAbTest(i)\"\n ngbTooltip=\"Remove AB Test\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addAbTest()\">+ Add AB Test</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n\n\n\n <p-accordion-panel value=\"16\">\n <p-accordion-header>Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n <div class=\"text-end\" *ngIf=\"shardUrl\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle\"></i>\n </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n </div>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\" controlId=\"domain-build-cs_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete [attr.aria-labelledby]=\"'domain-build-cs_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" field=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n placeholder=\"Search Product\" [inputStyle]=\"\n form.get('cs_product_id').touched &&\n form.get('cs_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : { border: '1px solid gray' }\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\" controlId=\"domain-build-cs_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_crm_source_id-label'\" formControlName=\"cs_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\" controlId=\"domain-build-cs_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_pdf_source_id-label'\" formControlName=\"cs_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" controlId=\"domain-build-cs_video_url\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_video_url\" class=\"form-control\" formControlName=\"cs_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\" controlId=\"domain-build-cs_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_book_demo_url\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\" controlId=\"domain-build-cs_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n <textarea id=\"domain-build-cs_cta_iframe\" class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\" controlId=\"domain-build-cs_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n <textarea id=\"domain-build-cs_join_message\" class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\" controlId=\"domain-build-cs_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-cs_pdf_download_text\" class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['cs_pdf_download_text'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image-label\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image2-label\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_pdf_image-label\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg-label\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg2-label\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </p-accordion>\n </div>\n\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n </div>\n </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n\n\n<ng-template #partnerCropper let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Partner Image</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n <pw-image-cropper\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n (closeEvent)=\"onClosePartnerModal()\"\n ></pw-image-cropper>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i7.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i7.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i7.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: i5$1.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", 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", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i3.Select, selector: "p-select", 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", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i13.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i13.CustomUploaderComponent, selector: "pw-custom-uploader", inputs: ["controlName", "previewData", "aspectRatio", "title"], outputs: ["saveEvent"] }, { kind: "component", type: i1$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i1$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
|
|
1383
1387
|
}
|
|
1384
1388
|
__decorate([
|
|
1385
1389
|
ValidateForm('form'),
|
|
@@ -1389,7 +1393,7 @@ __decorate([
|
|
|
1389
1393
|
], DomainConfigBuildComponent.prototype, "onSave", null);
|
|
1390
1394
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DomainConfigBuildComponent, decorators: [{
|
|
1391
1395
|
type: Component,
|
|
1392
|
-
args: [{ selector: 'pw-domain-config-build', standalone: false, template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n <p> The following parameters and settings will be applied to all public pages of this domain. </p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"!isLoading && data?.host_name\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscription' | transloco\"\n name=\"master_subscription_id\" controlId=\"domain-build-master_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_id-label'\"\n [options]=\"masterSubscriptionsList\"\n formControlName=\"master_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n placeholder=\"Select Master Subscription\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n \"\n name=\"master_subscription_product_id\" controlId=\"domain-build-master_subscription_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_product_id-label'\"\n [options]=\"masterSubscriptionProductList\"\n formControlName=\"master_subscription_product_id\"\n [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n [placeholder]=\"'Select Master Product'\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n name=\"blog_feature_key\" controlId=\"domain-build-blog_feature_key\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n <input type=\"text\"\n id=\"domain-build-blog_feature_key\"\n class=\"form-control\"\n formControlName=\"blog_feature_key\"\n [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n name=\"main_tos_id\" controlId=\"domain-build-main_tos_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-main_tos_id-label'\"\n [options]=\"subscriptionTosList\"\n formControlName=\"main_tos_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n [placeholder]=\"'Select Main TOS'\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n </p-select>\n\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n name=\"crm_subscription_id\" controlId=\"domain-build-crm_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_subscription_id-label'\"\n [options]=\"crmSubscriptionsList\"\n formControlName=\"crm_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n [placeholder]=\"'Select CRM Subscription'\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n </p-select>\n\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n name=\"crm_product_id\" controlId=\"domain-build-crm_product_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_product_id-label'\"\n [options]=\"crmProductList\"\n formControlName=\"crm_product_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n [placeholder]=\"'Select CRM Product'\"\n optionValue=\"id\"\n >\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n name=\"crm_source_id\" controlId=\"domain-build-crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_source_id-label'\"\n [options]=\"crmSourcesList\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n [placeholder]=\"'Select CRM Source'\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <!-- crm subscription fields end-->\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\" controlId=\"domain-build-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-active-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"active\" name=\"active\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n name=\"is_product_domain\" controlId=\"domain-build-is_product_domain\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-is_product_domain-label'\"\n uncheckedLabel=\"false\"\n checkedLabel=\"true\"\n formControlName=\"is_product_domain\"\n name=\"is_product_domain\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n name=\"can_register_through_main_page\" controlId=\"domain-build-can_register_through_main_page\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-can_register_through_main_page-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"can_register_through_main_page\"\n name=\"can_register_through_main_page\" [ngClass]=\"{\n 'is-invalid': submitted && f['can_register_through_main_page'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\" controlId=\"domain-build-social_login_enabled\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-social_login_enabled-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"social_login_enabled\"\n name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\" controlId=\"domain-build-notify_logins\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-notify_logins-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"notify_logins\"\n name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n\n <div class=\"my-5\">\n <h3>Pre-Built Pages Config (Resources, Landing Pages, etc)</h3>\n\n <p-accordion class=\"mt-5\">\n <p-accordionTab [header]=\"'Instructions - README FIRST'\">\n <div class=\"mb-3\">\n <p>We've built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n UIs for onboarding users.</p>\n <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n appear in the <strong>Admin > Users section</strong>.</p>\n <p>Once you've selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n <strong>/join/trial3</strong>.</p>\n <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n out.</p>\n </div>\n </p-accordionTab>\n\n <p-accordionTab [header]=\"'Subscribe to Product/Newsletter Config'\">\n <div class=\"mb-3\">\n <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n /join/trial2, etc.</p>\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n <!-- live page link -->\n <div class=\"text-end\" *ngIf=\"shardUrl\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle\"></i>\n </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n </div>\n <div class=\"row\">\n <div class=\"col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\" controlId=\"domain-build-trial_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete [attr.aria-labelledby]=\"'domain-build-trial_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" field=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n placeholder=\"Search Product\" [inputStyle]=\"\n form.get('trial_product_id').touched &&\n form.get('trial_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : { border: '1px solid gray' }\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\" controlId=\"domain-build-trial_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n \">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_crm_source_id-label'\" formControlName=\"trial_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\" controlId=\"domain-build-trial_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n \">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_pdf_source_id-label'\" formControlName=\"trial_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\" controlId=\"domain-build-trial_video_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-trial_video_url\" class=\"form-control\" formControlName=\"trial_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\" controlId=\"domain-build-trial_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n \">\n <input type=\"text\" id=\"domain-build-trial_book_demo_url\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_book_demo_url'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\" controlId=\"domain-build-trial_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n \">\n <textarea id=\"domain-build-trial_cta_iframe\" rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_cta_iframe'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\" controlId=\"domain-build-trial_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n \">\n <textarea id=\"domain-build-trial_join_message\" rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_join_message'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\" controlId=\"domain-build-trial_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-trial_pdf_download_text\" rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_pdf_download_text'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image-label\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image2-label\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_pdf_image-label\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg-label\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg2-label\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordionTab>\n\n <p-accordionTab [header]=\"'Header Section'\">\n <div class=\"row mt-4\" formGroupName=\"header\">\n <h4 class=\"mb-4\">Header Section</h4>\n\n <!-- Headline -->\n <div class=\"col-12 col-md-12\">\n <pw-input-container label=\"Header Headline\" name=\"headline\" controlId=\"domain-build-header-headline\">\n <input type=\"text\" id=\"domain-build-header-headline\" class=\"form-control\" formControlName=\"headline\" />\n </pw-input-container>\n </div>\n\n <!-- Video URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Video URL\" name=\"video_url\" controlId=\"domain-build-header-video_url\">\n <input type=\"text\" id=\"domain-build-header-video_url\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <!-- Background Image URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\" controlId=\"domain-build-header-bg_image_url\">\n <input type=\"text\" id=\"domain-build-header-bg_image_url\" class=\"form-control\" formControlName=\"bg_image_url\" />\n </pw-input-container>\n </div>\n\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Header Description\" name=\"description\" controlId=\"domain-build-header-description\">\n <textarea\n id=\"domain-build-header-description\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n ></textarea>\n </pw-input-container>\n </div>\n\n <!-- Sub Headings -->\n <div formArrayName=\"sub_headings\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(headerSubHeadings, $event)\">\n <div\n *ngFor=\"let sub of f['header'].get('sub_headings')['controls']; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-10\">\n <pw-input-container label=\"Sub Header Description\" name=\"description\" [controlId]=\"'domain-build-header-sub_description-' + i\">\n <textarea\n [id]=\"'domain-build-header-sub_description-' + i\"\n class=\"form-control\"\n rows=\"3\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n ></textarea>\n </pw-input-container>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeHeaderSubHeading(i)\"\n (keydown.enter)=\"removeHeaderSubHeading(i)\"\n (keydown.space)=\"removeHeaderSubHeading(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\">\n + Add Sub Heading\n </button>\n </div>\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Resources Section'\">\n <div class=\"row row mt-4 mb-4\">\n <h4 class=\"mb-3\">Resources Section</h4>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\" controlId=\"domain-build-resources_tagline\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n <input type=\"text\" id=\"domain-build-resources_tagline\" class=\"form-control\" formControlName=\"resources_tagline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\" controlId=\"domain-build-resources_description\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n <textarea id=\"domain-build-resources_description\" class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-resource_image-label\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordionTab>\n\n <p-accordionTab [header]=\"'Unique Selling Proposition Section (USP) '\">\n <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Title\" name=\"title\" controlId=\"domain-build-usps-title\">\n <input type=\"text\" id=\"domain-build-usps-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Video Url\" name=\"video_url\" controlId=\"domain-build-usps-video_url\">\n <input type=\"text\" id=\"domain-build-usps-video_url\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container label=\"USPs Description\" name=\"description\" controlId=\"domain-build-usps-description\">\n <textarea id=\"domain-build-usps-description\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <!-- USP Items -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(uspsItems, $event)\">\n <div\n *ngFor=\"let item of f['usps'].get('items')['controls']; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-10\">\n <pw-input-container label=\"Item Description\" name=\"description\" [controlId]=\"'domain-build-usps-item-desc-' + i\">\n <textarea [id]=\"'domain-build-usps-item-desc-' + i\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeUspItem(i)\"\n (keydown.enter)=\"removeUspItem(i)\"\n (keydown.space)=\"removeUspItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n + Add USP Item\n </button>\n </div>\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Partners (Clients) Section'\">\n <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n\n <!-- Title -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Partner Title\" name=\"title\" controlId=\"domain-build-partners-title\">\n <input type=\"text\" id=\"domain-build-partners-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Partners Description\" name=\"description\" controlId=\"domain-build-partners-description\">\n <textarea id=\"domain-build-partners-description\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <!-- Partner Items with Drag Support -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(partnersItems, $event)\">\n <div\n *ngFor=\"let item of partnersItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <!-- Name -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" class=\"col-12\" name=\"name\" [controlId]=\"'domain-build-partner-name-' + i\">\n <input [id]=\"'domain-build-partner-name-' + i\" class=\"form-control\" formControlName=\"name\" />\n </pw-input-container>\n </div>\n\n <!-- Blog URL + Drag Handle -->\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog Url\" name=\"blog_url\" [controlId]=\"'domain-build-partner-blog_url-' + i\">\n <input [id]=\"'domain-build-partner-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n\n <!-- Video URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Video Url\" name=\"video_url\" [controlId]=\"'domain-build-partner-video_url-' + i\">\n <input [id]=\"'domain-build-partner-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <!-- Image URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Image Url\" name=\"image_url\" [controlId]=\"'domain-build-partner-image_url-' + i\">\n <input [id]=\"'domain-build-partner-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n </div>\n\n <!-- Delete Icon -->\n <div class=\"col-md-12 text-end mt-2\">\n <i\n ngbTooltip=\"Remove\"\n (click)=\"removePartnerItem(i)\"\n (keydown.enter)=\"removePartnerItem(i)\"\n (keydown.space)=\"removePartnerItem(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <!-- Add New Partner -->\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Testimonials Section'\">\n <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n <h4 class=\"mb-4\">Testimonials Section</h4>\n\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\" controlId=\"domain-build-testimonials-title\">\n <input type=\"text\" id=\"domain-build-testimonials-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\" controlId=\"domain-build-testimonials-description\">\n <textarea id=\"domain-build-testimonials-description\" rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <!-- Items List -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(testimonialsItems, $event)\">\n <div\n *ngFor=\"let item of testimonialsItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" name=\"name\" [controlId]=\"'domain-build-testimonial-name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-name-' + i\" class=\"form-control\" formControlName=\"name\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-testimonial-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-testimonial-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-testimonial-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Testimonial\" class=\"col-md-10\" name=\"testimonial\" [controlId]=\"'domain-build-testimonial-text-' + i\">\n <textarea [id]=\"'domain-build-testimonial-text-' + i\" class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"></textarea>\n </pw-input-container>\n\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n ngbTooltip=\"Remove\"\n (click)=\"removeTestimonialItem(i)\"\n (keydown.enter)=\"removeTestimonialItem(i)\"\n (keydown.space)=\"removeTestimonialItem(i)\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">\n + Add Testimonial\n </button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n <p-accordionTab [header]=\"'Video Section'\">\n <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n <h4 class=\"mb-3\">Video Section</h4>\n\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\" controlId=\"domain-build-videos-title\">\n <input type=\"text\" id=\"domain-build-videos-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\" controlId=\"domain-build-videos-description\">\n <textarea id=\"domain-build-videos-description\" rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <!-- Video Items -->\n <div\n formArrayName=\"items\"\n class=\"col-12 mt-3\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(videosItems, $event)\"\n >\n <div\n *ngFor=\"let item of videosItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" [controlId]=\"'domain-build-video-item-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-video-item-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-video-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-video-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-md-10\" name=\"description\" [controlId]=\"'domain-build-video-item-description-' + i\">\n <textarea [id]=\"'domain-build-video-item-description-' + i\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeVideoItem(i)\"\n (keydown.enter)=\"removeVideoItem(i)\"\n (keydown.space)=\"removeVideoItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">\n + Add Video\n </button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Call to Actions Section (CTAs)'\">\n <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n <h4 class=\"mb-4\">CTAs Section</h4>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-ctas-title\">\n <input type=\"text\" id=\"domain-build-ctas-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" controlId=\"domain-build-ctas-image_url\">\n <input type=\"text\" id=\"domain-build-ctas-image_url\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" controlId=\"domain-build-ctas-button_text\">\n <input type=\"text\" id=\"domain-build-ctas-button_text\" class=\"form-control\" formControlName=\"button_text\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-ctas-description\">\n <input type=\"text\" id=\"domain-build-ctas-description\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n </div>\n\n <!-- CTA Items -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(ctasItems, $event)\">\n <div\n *ngFor=\"let item of ctasItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" [controlId]=\"'domain-build-cta-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Cta URL\" name=\"cta_url\" [controlId]=\"'domain-build-cta-item-cta_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-cta_url-' + i\" class=\"form-control\" formControlName=\"cta_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Video URL\" name=\"video_url\" [controlId]=\"'domain-build-cta-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Title\" name=\"title\" [controlId]=\"'domain-build-cta-item-title-' + i\">\n <input [id]=\"'domain-build-cta-item-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Description\" name=\"description\" [controlId]=\"'domain-build-cta-item-description-' + i\">\n <input [id]=\"'domain-build-cta-item-description-' + i\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-5\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" [controlId]=\"'domain-build-cta-item-button_text-' + i\">\n <input [id]=\"'domain-build-cta-item-button_text-' + i\" class=\"form-control\" formControlName=\"button_text\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-1 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeCtasItem(i)\"\n (keydown.enter)=\"removeCtasItem(i)\"\n (keydown.space)=\"removeCtasItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n <p-accordionTab [header]=\"'Integrations Section'\">\n <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n <h4 class=\"mb-3\">Integrations Section</h4>\n\n <pw-input-container label=\"Title\" class=\"col-12\" name=\"title\" controlId=\"domain-build-integrations-title\">\n <input type=\"text\" id=\"domain-build-integrations-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"description\" controlId=\"domain-build-integrations-description\">\n <textarea id=\"domain-build-integrations-description\" class=\"form-control\" formControlName=\"description\" rows=\"3\"></textarea>\n </pw-input-container>\n\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(integrationsItems, $event)\">\n <div\n *ngFor=\"let item of integrationsItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 rounded bg-light\"\n cdkDrag\n >\n <pw-input-container label=\"Title\" class=\"col-md-6\" name=\"title\" [controlId]=\"'domain-build-integration-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Description\" name=\"description\" [controlId]=\"'domain-build-integration-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-description-' + i\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"Blog URL\" class=\"col-md-6\" name=\"blog_url\" [controlId]=\"'domain-build-integration-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-integration-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-integration-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n\n <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n <i\n class=\"fa fa-trash delete-icon align-self-center\"\n (click)=\"removeIntegrationItem(i)\"\n (keydown.enter)=\"removeIntegrationItem(i)\"\n (keydown.space)=\"removeIntegrationItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Contact Us Section'\">\n <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n <h4 class=\"mb-3\">Contact Us Section</h4>\n\n <pw-input-container label=\"Url\" class=\"col-md-6\" name=\"url\" controlId=\"domain-build-contact_us-url\">\n <input type=\"text\" id=\"domain-build-contact_us-url\" class=\"form-control\" formControlName=\"url\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\" controlId=\"domain-build-contact_us-description\">\n <textarea id=\"domain-build-contact_us-description\" rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <div formArrayName=\"questions\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsQuestions, $event)\">\n <div\n *ngFor=\"let questionGroup of contactUsQuestions.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3\"\n cdkDrag\n >\n <pw-input-container label=\"Question\" class=\"col-md-10\" name=\"question\" [controlId]=\"'domain-build-contact_us-question-' + i\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-question-' + i\" class=\"form-control\" formControlName=\"question\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsQuestion(i)\"\n (keydown.enter)=\"removeContactUsQuestion(i)\"\n (keydown.space)=\"removeContactUsQuestion(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-12 mt-3\" formArrayName=\"options\" cdkDropList [cdkDropListData]=\"getQuestionOptions(i).controls\" (cdkDropListDropped)=\"dropContactUsOptions(i, $event)\">\n <div\n class=\"row align-items-center mb-2 border p-3\"\n *ngFor=\"let option of getQuestionOptions(i).controls; let j = index\"\n [formGroupName]=\"j\"\n cdkDrag\n >\n <pw-input-container label=\"Option\" class=\"col-md-10\" name=\"option\" [controlId]=\"'domain-build-contact_us-option-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-option-' + i + '-' + j\" class=\"form-control\" formControlName=\"option\" />\n </pw-input-container>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsOption(i, j)\"\n (keydown.enter)=\"removeContactUsOption(i, j)\"\n (keydown.space)=\"removeContactUsOption(i, j)\"\n ngbTooltip=\"Remove Option\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder option\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\">\n + Add Option\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"text-start mt-3\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">\n + Add Question\n </button>\n </div>\n </div>\n\n <div formArrayName=\"hubspot\" class=\"col-12 mt-4\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsHubspotItems, $event)\">\n <h5 class=\"mb-4\">Hubspot Embeds</h5>\n\n <div\n *ngFor=\"let hub of contactUsHubspotItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-2\"\n cdkDrag\n >\n <pw-input-container label=\"ID\" class=\"col-md-5\" name=\"id\" [controlId]=\"'domain-build-hubspot-id-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-id-' + i\" class=\"form-control\" formControlName=\"id\" />\n </pw-input-container>\n\n <pw-input-container label=\"Position\" class=\"col-md-6\" name=\"position\" [controlId]=\"'domain-build-hubspot-position-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-position-' + i\" class=\"form-control\" formControlName=\"position\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"Div\" class=\"col-10\" name=\"div\" [controlId]=\"'domain-build-hubspot-div-' + i\">\n <textarea\n [id]=\"'domain-build-hubspot-div-' + i\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"div\"\n [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\"\n ></textarea>\n </pw-input-container>\n\n <div class=\"col-md-2 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeHubspotItem(i)\"\n (keydown.enter)=\"removeHubspotItem(i)\"\n (keydown.space)=\"removeHubspotItem(i)\"\n ngbTooltip=\"Remove Hubspot Embed\"\n aria-hidden=\"true\">\n</i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">\n + Add Hubspot Embed\n </button>\n </div>\n </div>\n\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Book a Demo Section'\">\n <div class=\"row mt-4\">\n <div class=\"col-12\">\n <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n <div formGroupName=\"book_demo\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-book_demo-title\">\n <input type=\"text\" id=\"domain-build-book_demo-title\" formControlName=\"title\" class=\"form-control\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-book_demo-description\">\n <input type=\"text\" id=\"domain-build-book_demo-description\" formControlName=\"description\" class=\"form-control\" />\n </pw-input-container>\n\n <div formArrayName=\"items\" cdkDropList (cdkDropListDropped)=\"dropBookDemoLinks($event)\">\n <div\n *ngFor=\"let link of f['book_demo'].get('items')['controls']; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link Title\" name=\"title\" [controlId]=\"'domain-build-book_demo-link-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link URL\" name=\"url\" [controlId]=\"'domain-build-book_demo-link-url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-url-' + i\" class=\"form-control\" formControlName=\"url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n ngbTooltip=\"Remove\"\n (click)=\"removeBookDemoLink(i)\"\n (keydown.enter)=\"removeBookDemoLink(i)\"\n (keydown.space)=\"removeBookDemoLink(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">\n + Add Book Demo Link\n </button>\n </div>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Navbar Section'\">\n <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n <h4 class=\"mb-3\">Navbar Section</h4>\n\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(navbarItems, $event)\">\n <div\n *ngFor=\"let item of navbarItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-navbar-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-navbar-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-path-' + i\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeNavbarItem(i)\"\n (keydown.enter)=\"removeNavbarItem(i)\"\n (keydown.space)=\"removeNavbarItem(i)\"\n ngbTooltip=\"Remove Navbar Item\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getNavbarSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\"\n >\n <div\n *ngFor=\"let sub of getNavbarSubtitles(i).controls; let j = index\"\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeSubtitle(i, j)\"\n (keydown.enter)=\"removeSubtitle(i, j)\"\n (keydown.space)=\"removeSubtitle(i, j)\"\n ngbTooltip=\"Remove Subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n + Add Subtitle\n </button>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">\n + Add Navbar Item\n </button>\n </div>\n </div>\n </p-accordionTab>\n\n\n <p-accordionTab [header]=\"'Footer Links Section'\">\n <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n <h4 class=\"mb-3\">Footer Links Section</h4>\n\n <div\n formArrayName=\"items\"\n class=\"col-12\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(footerLinksItems, $event)\"\n >\n <div\n *ngFor=\"let item of footerLinksItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-footer-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-footer-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-path-' + i\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterLinkItem(i)\"\n (keydown.enter)=\"removeFooterLinkItem(i)\"\n (keydown.space)=\"removeFooterLinkItem(i)\"\n ngbTooltip=\"Remove Footer Item\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n </div>\n\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getFooterSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropFooterSubtitles(i, $event)\"\n >\n <div\n *ngFor=\"let sub of getFooterSubtitles(i).controls; let j = index\"\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n </div>\n\n\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterSubtitle(i, j)\"\n (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n (keydown.space)=\"removeFooterSubtitle(i, j)\"\n ngbTooltip=\"Remove Subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"btn btn-sm btn-primary mt-2\"\n (click)=\"addFooterSubtitle(i)\"\n >\n + Add Subtitle\n </button>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"btn btn-primary mt-2 mb-2\"\n (click)=\"addFooterLinkItem()\"\n >\n + Add Footer Link\n </button>\n </div>\n </div>\n </p-accordionTab>\n\n\n\n\n\n <p-accordionTab [header]=\"'Guides Section'\">\n <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n <h4 class=\"mb-3\">Guides Section</h4>\n\n <div formArrayName=\"items\" class=\"col-12\">\n <div cdkDropList (cdkDropListDropped)=\"dropItems(guidesItems, $event)\">\n <div\n *ngFor=\"let item of guidesItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"border p-3 mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-start\">\n\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-guide-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Button Text\" class=\"col-md-6\" name=\"button_text\" [controlId]=\"'domain-build-guide-button_text-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-button_text-' + i\" class=\"form-control\" formControlName=\"button_text\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"row mt-2\">\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-guide-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Guide URL\" class=\"col-md-6\" name=\"guide_url\" [controlId]=\"'domain-build-guide-guide_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-guide_url-' + i\" class=\"form-control\" formControlName=\"guide_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"row mt-2\">\n <pw-input-container label=\"Description\" class=\"col-md-11\" name=\"description\" [controlId]=\"'domain-build-guide-description-' + i\">\n <textarea\n [id]=\"'domain-build-guide-description-' + i\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n ></textarea>\n </pw-input-container>\n\n <div class=\"col-md-1 d-flex align-items-start justify-content-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeGuideItem(i)\"\n (keydown.enter)=\"removeGuideItem(i)\"\n (keydown.space)=\"removeGuideItem(i)\"\n ngbTooltip=\"Remove Guide\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">\n + Add Guide\n </button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n\n\n <p-accordionTab [header]=\"'AB Tests Section'\">\n <div class=\"row mt-3 mb-4\">\n <h4 class=\"mb-3\">AB Tests</h4>\n <div formArrayName=\"ab_tests\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(abTests, $event)\">\n <div\n *ngFor=\"let abTest of abTests.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3\"\n cdkDrag\n >\n <pw-input-container label=\"Description\" class=\"col-md-5\" name=\"description\" [controlId]=\"'domain-build-ab_test-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-description-' + i\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n\n <pw-input-container label=\"Experiment Name\" class=\"col-md-6\" name=\"experiment_name\" [controlId]=\"'domain-build-ab_test-experiment_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-experiment_name-' + i\" class=\"form-control\" formControlName=\"experiment_name\" />\n </pw-input-container>\n\n\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"DB Shard\" class=\"col-md-6\" name=\"db_shard\" [controlId]=\"'domain-build-ab_test-db_shard-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-db_shard-' + i\" class=\"form-control\" formControlName=\"db_shard\" />\n </pw-input-container>\n\n <pw-input-container label=\"Microservice Name\" class=\"col-md-6\" name=\"microservice_name\" [controlId]=\"'domain-build-ab_test-microservice_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-microservice_name-' + i\" class=\"form-control\" formControlName=\"microservice_name\" />\n </pw-input-container>\n\n <div class=\"col-md-12 text-end mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeAbTest(i)\"\n (keydown.enter)=\"removeAbTest(i)\"\n (keydown.space)=\"removeAbTest(i)\"\n ngbTooltip=\"Remove AB Test\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addAbTest()\">+ Add AB Test</button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n\n\n\n\n\n <p-accordionTab [header]=\"'Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)'\">\n <div class=\"mb-3\">\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n <div class=\"text-end\" *ngIf=\"shardUrl\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle\"></i>\n </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n </div>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\" controlId=\"domain-build-cs_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete [attr.aria-labelledby]=\"'domain-build-cs_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" field=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n placeholder=\"Search Product\" [inputStyle]=\"\n form.get('cs_product_id').touched &&\n form.get('cs_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : { border: '1px solid gray' }\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\" controlId=\"domain-build-cs_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_crm_source_id-label'\" formControlName=\"cs_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\" controlId=\"domain-build-cs_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_pdf_source_id-label'\" formControlName=\"cs_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" controlId=\"domain-build-cs_video_url\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_video_url\" class=\"form-control\" formControlName=\"cs_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\" controlId=\"domain-build-cs_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_book_demo_url\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\" controlId=\"domain-build-cs_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n <textarea id=\"domain-build-cs_cta_iframe\" class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\" controlId=\"domain-build-cs_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n <textarea id=\"domain-build-cs_join_message\" class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\" controlId=\"domain-build-cs_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-cs_pdf_download_text\" class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['cs_pdf_download_text'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image-label\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image2-label\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_pdf_image-label\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg-label\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg2-label\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordionTab>\n </p-accordion>\n </div>\n\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n </div>\n </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n\n\n<ng-template #partnerCropper let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Partner Image</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n <pw-image-cropper\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n (closeEvent)=\"onClosePartnerModal()\"\n ></pw-image-cropper>\n </div>\n</ng-template>\n" }]
|
|
1396
|
+
args: [{ selector: 'pw-domain-config-build', standalone: false, template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n <p> The following parameters and settings will be applied to all public pages of this domain. </p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"!isLoading && data?.host_name\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscription' | transloco\"\n name=\"master_subscription_id\" controlId=\"domain-build-master_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_id-label'\"\n [options]=\"masterSubscriptionsList\"\n formControlName=\"master_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n placeholder=\"Select Master Subscription\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n \"\n name=\"master_subscription_product_id\" controlId=\"domain-build-master_subscription_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_product_id-label'\"\n [options]=\"masterSubscriptionProductList\"\n formControlName=\"master_subscription_product_id\"\n [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n [placeholder]=\"'Select Master Product'\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n name=\"blog_feature_key\" controlId=\"domain-build-blog_feature_key\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n <input type=\"text\"\n id=\"domain-build-blog_feature_key\"\n class=\"form-control\"\n formControlName=\"blog_feature_key\"\n [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n name=\"main_tos_id\" controlId=\"domain-build-main_tos_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-main_tos_id-label'\"\n [options]=\"subscriptionTosList\"\n formControlName=\"main_tos_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n [placeholder]=\"'Select Main TOS'\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n </p-select>\n\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n name=\"crm_subscription_id\" controlId=\"domain-build-crm_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_subscription_id-label'\"\n [options]=\"crmSubscriptionsList\"\n formControlName=\"crm_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n [placeholder]=\"'Select CRM Subscription'\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n </p-select>\n\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n name=\"crm_product_id\" controlId=\"domain-build-crm_product_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_product_id-label'\"\n [options]=\"crmProductList\"\n formControlName=\"crm_product_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n [placeholder]=\"'Select CRM Product'\"\n optionValue=\"id\"\n >\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n name=\"crm_source_id\" controlId=\"domain-build-crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_source_id-label'\"\n [options]=\"crmSourcesList\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n [placeholder]=\"'Select CRM Source'\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <!-- crm subscription fields end-->\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\" controlId=\"domain-build-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-active-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"active\" name=\"active\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n name=\"is_product_domain\" controlId=\"domain-build-is_product_domain\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-is_product_domain-label'\"\n uncheckedLabel=\"false\"\n checkedLabel=\"true\"\n formControlName=\"is_product_domain\"\n name=\"is_product_domain\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n name=\"can_register_through_main_page\" controlId=\"domain-build-can_register_through_main_page\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-can_register_through_main_page-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"can_register_through_main_page\"\n name=\"can_register_through_main_page\" [ngClass]=\"{\n 'is-invalid': submitted && f['can_register_through_main_page'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\" controlId=\"domain-build-social_login_enabled\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-social_login_enabled-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"social_login_enabled\"\n name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\" controlId=\"domain-build-notify_logins\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch size=\"small\" [attr.aria-labelledby]=\"'domain-build-notify_logins-label'\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"notify_logins\"\n name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n\n <div class=\"my-5\">\n <h3>Pre-Built Pages Config (Resources, Landing Pages, etc)</h3>\n\n <p-accordion class=\"mt-5\">\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Instructions - README FIRST</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>We've built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n UIs for onboarding users.</p>\n <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n appear in the <strong>Admin > Users section</strong>.</p>\n <p>Once you've selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n <strong>/join/trial3</strong>.</p>\n <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n out.</p>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n <p-accordion-panel value=\"1\">\n <p-accordion-header>Subscribe to Product/Newsletter Config</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n /join/trial2, etc.</p>\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n <!-- live page link -->\n <div class=\"text-end\" *ngIf=\"shardUrl\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle\"></i>\n </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n </div>\n <div class=\"row\">\n <div class=\"col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\" controlId=\"domain-build-trial_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete [attr.aria-labelledby]=\"'domain-build-trial_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" field=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n placeholder=\"Search Product\" [inputStyle]=\"\n form.get('trial_product_id').touched &&\n form.get('trial_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : { border: '1px solid gray' }\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\" controlId=\"domain-build-trial_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n \">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_crm_source_id-label'\" formControlName=\"trial_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\" controlId=\"domain-build-trial_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n \">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_pdf_source_id-label'\" formControlName=\"trial_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\" controlId=\"domain-build-trial_video_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-trial_video_url\" class=\"form-control\" formControlName=\"trial_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\" controlId=\"domain-build-trial_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n \">\n <input type=\"text\" id=\"domain-build-trial_book_demo_url\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_book_demo_url'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\" controlId=\"domain-build-trial_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n \">\n <textarea id=\"domain-build-trial_cta_iframe\" rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_cta_iframe'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\" controlId=\"domain-build-trial_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n \">\n <textarea id=\"domain-build-trial_join_message\" rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_join_message'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\" controlId=\"domain-build-trial_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-trial_pdf_download_text\" rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_pdf_download_text'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image-label\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image2-label\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_pdf_image-label\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg-label\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg2-label\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n <p-accordion-panel value=\"2\">\n <p-accordion-header>Header Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4\" formGroupName=\"header\">\n <h4 class=\"mb-4\">Header Section</h4>\n\n <!-- Headline -->\n <div class=\"col-12 col-md-12\">\n <pw-input-container label=\"Header Headline\" name=\"headline\" controlId=\"domain-build-header-headline\">\n <input type=\"text\" id=\"domain-build-header-headline\" class=\"form-control\" formControlName=\"headline\" />\n </pw-input-container>\n </div>\n\n <!-- Video URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Video URL\" name=\"video_url\" controlId=\"domain-build-header-video_url\">\n <input type=\"text\" id=\"domain-build-header-video_url\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <!-- Background Image URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\" controlId=\"domain-build-header-bg_image_url\">\n <input type=\"text\" id=\"domain-build-header-bg_image_url\" class=\"form-control\" formControlName=\"bg_image_url\" />\n </pw-input-container>\n </div>\n\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Header Description\" name=\"description\" controlId=\"domain-build-header-description\">\n <textarea\n id=\"domain-build-header-description\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n ></textarea>\n </pw-input-container>\n </div>\n\n <!-- Sub Headings -->\n <div formArrayName=\"sub_headings\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(headerSubHeadings, $event)\">\n <div\n *ngFor=\"let sub of f['header'].get('sub_headings')['controls']; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-10\">\n <pw-input-container label=\"Sub Header Description\" name=\"description\" [controlId]=\"'domain-build-header-sub_description-' + i\">\n <textarea\n [id]=\"'domain-build-header-sub_description-' + i\"\n class=\"form-control\"\n rows=\"3\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n ></textarea>\n </pw-input-container>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeHeaderSubHeading(i)\"\n (keydown.enter)=\"removeHeaderSubHeading(i)\"\n (keydown.space)=\"removeHeaderSubHeading(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\">\n + Add Sub Heading\n </button>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"3\">\n <p-accordion-header>Resources Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row row mt-4 mb-4\">\n <h4 class=\"mb-3\">Resources Section</h4>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\" controlId=\"domain-build-resources_tagline\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n <input type=\"text\" id=\"domain-build-resources_tagline\" class=\"form-control\" formControlName=\"resources_tagline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\" controlId=\"domain-build-resources_description\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n <textarea id=\"domain-build-resources_description\" class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-resource_image-label\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n <p-accordion-panel value=\"4\">\n <p-accordion-header>Unique Selling Proposition Section (USP)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Title\" name=\"title\" controlId=\"domain-build-usps-title\">\n <input type=\"text\" id=\"domain-build-usps-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Video Url\" name=\"video_url\" controlId=\"domain-build-usps-video_url\">\n <input type=\"text\" id=\"domain-build-usps-video_url\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container label=\"USPs Description\" name=\"description\" controlId=\"domain-build-usps-description\">\n <textarea id=\"domain-build-usps-description\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <!-- USP Items -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(uspsItems, $event)\">\n <div\n *ngFor=\"let item of f['usps'].get('items')['controls']; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-10\">\n <pw-input-container label=\"Item Description\" name=\"description\" [controlId]=\"'domain-build-usps-item-desc-' + i\">\n <textarea [id]=\"'domain-build-usps-item-desc-' + i\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeUspItem(i)\"\n (keydown.enter)=\"removeUspItem(i)\"\n (keydown.space)=\"removeUspItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n + Add USP Item\n </button>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"5\">\n <p-accordion-header>Partners (Clients) Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n\n <!-- Title -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Partner Title\" name=\"title\" controlId=\"domain-build-partners-title\">\n <input type=\"text\" id=\"domain-build-partners-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Partners Description\" name=\"description\" controlId=\"domain-build-partners-description\">\n <textarea id=\"domain-build-partners-description\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <!-- Partner Items with Drag Support -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(partnersItems, $event)\">\n <div\n *ngFor=\"let item of partnersItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <!-- Name -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" class=\"col-12\" name=\"name\" [controlId]=\"'domain-build-partner-name-' + i\">\n <input [id]=\"'domain-build-partner-name-' + i\" class=\"form-control\" formControlName=\"name\" />\n </pw-input-container>\n </div>\n\n <!-- Blog URL + Drag Handle -->\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog Url\" name=\"blog_url\" [controlId]=\"'domain-build-partner-blog_url-' + i\">\n <input [id]=\"'domain-build-partner-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n\n <!-- Video URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Video Url\" name=\"video_url\" [controlId]=\"'domain-build-partner-video_url-' + i\">\n <input [id]=\"'domain-build-partner-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <!-- Image URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Image Url\" name=\"image_url\" [controlId]=\"'domain-build-partner-image_url-' + i\">\n <input [id]=\"'domain-build-partner-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n </div>\n\n <!-- Delete Icon -->\n <div class=\"col-md-12 text-end mt-2\">\n <i\n ngbTooltip=\"Remove\"\n (click)=\"removePartnerItem(i)\"\n (keydown.enter)=\"removePartnerItem(i)\"\n (keydown.space)=\"removePartnerItem(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <!-- Add New Partner -->\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"6\">\n <p-accordion-header>Testimonials Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n <h4 class=\"mb-4\">Testimonials Section</h4>\n\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\" controlId=\"domain-build-testimonials-title\">\n <input type=\"text\" id=\"domain-build-testimonials-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\" controlId=\"domain-build-testimonials-description\">\n <textarea id=\"domain-build-testimonials-description\" rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <!-- Items List -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(testimonialsItems, $event)\">\n <div\n *ngFor=\"let item of testimonialsItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" name=\"name\" [controlId]=\"'domain-build-testimonial-name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-name-' + i\" class=\"form-control\" formControlName=\"name\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-testimonial-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-testimonial-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-testimonial-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Testimonial\" class=\"col-md-10\" name=\"testimonial\" [controlId]=\"'domain-build-testimonial-text-' + i\">\n <textarea [id]=\"'domain-build-testimonial-text-' + i\" class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"></textarea>\n </pw-input-container>\n\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n ngbTooltip=\"Remove\"\n (click)=\"removeTestimonialItem(i)\"\n (keydown.enter)=\"removeTestimonialItem(i)\"\n (keydown.space)=\"removeTestimonialItem(i)\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">\n + Add Testimonial\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n <p-accordion-panel value=\"7\">\n <p-accordion-header>Video Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n <h4 class=\"mb-3\">Video Section</h4>\n\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\" controlId=\"domain-build-videos-title\">\n <input type=\"text\" id=\"domain-build-videos-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\" controlId=\"domain-build-videos-description\">\n <textarea id=\"domain-build-videos-description\" rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <!-- Video Items -->\n <div\n formArrayName=\"items\"\n class=\"col-12 mt-3\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(videosItems, $event)\"\n >\n <div\n *ngFor=\"let item of videosItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" [controlId]=\"'domain-build-video-item-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-video-item-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-video-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-video-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-md-10\" name=\"description\" [controlId]=\"'domain-build-video-item-description-' + i\">\n <textarea [id]=\"'domain-build-video-item-description-' + i\" class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeVideoItem(i)\"\n (keydown.enter)=\"removeVideoItem(i)\"\n (keydown.space)=\"removeVideoItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">\n + Add Video\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"8\">\n <p-accordion-header>Call to Actions Section (CTAs)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n <h4 class=\"mb-4\">CTAs Section</h4>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-ctas-title\">\n <input type=\"text\" id=\"domain-build-ctas-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" controlId=\"domain-build-ctas-image_url\">\n <input type=\"text\" id=\"domain-build-ctas-image_url\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" controlId=\"domain-build-ctas-button_text\">\n <input type=\"text\" id=\"domain-build-ctas-button_text\" class=\"form-control\" formControlName=\"button_text\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-ctas-description\">\n <input type=\"text\" id=\"domain-build-ctas-description\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n </div>\n\n <!-- CTA Items -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(ctasItems, $event)\">\n <div\n *ngFor=\"let item of ctasItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" [controlId]=\"'domain-build-cta-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Cta URL\" name=\"cta_url\" [controlId]=\"'domain-build-cta-item-cta_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-cta_url-' + i\" class=\"form-control\" formControlName=\"cta_url\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Video URL\" name=\"video_url\" [controlId]=\"'domain-build-cta-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Title\" name=\"title\" [controlId]=\"'domain-build-cta-item-title-' + i\">\n <input [id]=\"'domain-build-cta-item-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Description\" name=\"description\" [controlId]=\"'domain-build-cta-item-description-' + i\">\n <input [id]=\"'domain-build-cta-item-description-' + i\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-5\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" [controlId]=\"'domain-build-cta-item-button_text-' + i\">\n <input [id]=\"'domain-build-cta-item-button_text-' + i\" class=\"form-control\" formControlName=\"button_text\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-1 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeCtasItem(i)\"\n (keydown.enter)=\"removeCtasItem(i)\"\n (keydown.space)=\"removeCtasItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n <p-accordion-panel value=\"9\">\n <p-accordion-header>Integrations Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n <h4 class=\"mb-3\">Integrations Section</h4>\n\n <pw-input-container label=\"Title\" class=\"col-12\" name=\"title\" controlId=\"domain-build-integrations-title\">\n <input type=\"text\" id=\"domain-build-integrations-title\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"description\" controlId=\"domain-build-integrations-description\">\n <textarea id=\"domain-build-integrations-description\" class=\"form-control\" formControlName=\"description\" rows=\"3\"></textarea>\n </pw-input-container>\n\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(integrationsItems, $event)\">\n <div\n *ngFor=\"let item of integrationsItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 rounded bg-light\"\n cdkDrag\n >\n <pw-input-container label=\"Title\" class=\"col-md-6\" name=\"title\" [controlId]=\"'domain-build-integration-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Description\" name=\"description\" [controlId]=\"'domain-build-integration-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-description-' + i\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"Blog URL\" class=\"col-md-6\" name=\"blog_url\" [controlId]=\"'domain-build-integration-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-blog_url-' + i\" class=\"form-control\" formControlName=\"blog_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-integration-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-integration-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-video_url-' + i\" class=\"form-control\" formControlName=\"video_url\" />\n </pw-input-container>\n\n <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n <i\n class=\"fa fa-trash delete-icon align-self-center\"\n (click)=\"removeIntegrationItem(i)\"\n (keydown.enter)=\"removeIntegrationItem(i)\"\n (keydown.space)=\"removeIntegrationItem(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"10\">\n <p-accordion-header>Contact Us Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n <h4 class=\"mb-3\">Contact Us Section</h4>\n\n <pw-input-container label=\"Url\" class=\"col-md-6\" name=\"url\" controlId=\"domain-build-contact_us-url\">\n <input type=\"text\" id=\"domain-build-contact_us-url\" class=\"form-control\" formControlName=\"url\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\" controlId=\"domain-build-contact_us-description\">\n <textarea id=\"domain-build-contact_us-description\" rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n </pw-input-container>\n\n <div formArrayName=\"questions\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsQuestions, $event)\">\n <div\n *ngFor=\"let questionGroup of contactUsQuestions.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3\"\n cdkDrag\n >\n <pw-input-container label=\"Question\" class=\"col-md-10\" name=\"question\" [controlId]=\"'domain-build-contact_us-question-' + i\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-question-' + i\" class=\"form-control\" formControlName=\"question\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsQuestion(i)\"\n (keydown.enter)=\"removeContactUsQuestion(i)\"\n (keydown.space)=\"removeContactUsQuestion(i)\"\n ngbTooltip=\"Remove\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder question\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-12 mt-3\" formArrayName=\"options\" cdkDropList [cdkDropListData]=\"getQuestionOptions(i).controls\" (cdkDropListDropped)=\"dropContactUsOptions(i, $event)\">\n <div\n class=\"row align-items-center mb-2 border p-3\"\n *ngFor=\"let option of getQuestionOptions(i).controls; let j = index\"\n [formGroupName]=\"j\"\n cdkDrag\n >\n <pw-input-container label=\"Option\" class=\"col-md-10\" name=\"option\" [controlId]=\"'domain-build-contact_us-option-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-option-' + i + '-' + j\" class=\"form-control\" formControlName=\"option\" />\n </pw-input-container>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsOption(i, j)\"\n (keydown.enter)=\"removeContactUsOption(i, j)\"\n (keydown.space)=\"removeContactUsOption(i, j)\"\n ngbTooltip=\"Remove Option\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder option\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\">\n + Add Option\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"text-start mt-3\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">\n + Add Question\n </button>\n </div>\n </div>\n\n <div formArrayName=\"hubspot\" class=\"col-12 mt-4\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsHubspotItems, $event)\">\n <h5 class=\"mb-4\">Hubspot Embeds</h5>\n\n <div\n *ngFor=\"let hub of contactUsHubspotItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-2\"\n cdkDrag\n >\n <pw-input-container label=\"ID\" class=\"col-md-5\" name=\"id\" [controlId]=\"'domain-build-hubspot-id-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-id-' + i\" class=\"form-control\" formControlName=\"id\" />\n </pw-input-container>\n\n <pw-input-container label=\"Position\" class=\"col-md-6\" name=\"position\" [controlId]=\"'domain-build-hubspot-position-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-position-' + i\" class=\"form-control\" formControlName=\"position\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"Div\" class=\"col-10\" name=\"div\" [controlId]=\"'domain-build-hubspot-div-' + i\">\n <textarea\n [id]=\"'domain-build-hubspot-div-' + i\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"div\"\n [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\"\n ></textarea>\n </pw-input-container>\n\n <div class=\"col-md-2 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeHubspotItem(i)\"\n (keydown.enter)=\"removeHubspotItem(i)\"\n (keydown.space)=\"removeHubspotItem(i)\"\n ngbTooltip=\"Remove Hubspot Embed\"\n aria-hidden=\"true\">\n</i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">\n + Add Hubspot Embed\n </button>\n </div>\n </div>\n\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"11\">\n <p-accordion-header>Book a Demo Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4\">\n <div class=\"col-12\">\n <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n <div formGroupName=\"book_demo\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-book_demo-title\">\n <input type=\"text\" id=\"domain-build-book_demo-title\" formControlName=\"title\" class=\"form-control\" />\n </pw-input-container>\n\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-book_demo-description\">\n <input type=\"text\" id=\"domain-build-book_demo-description\" formControlName=\"description\" class=\"form-control\" />\n </pw-input-container>\n\n <div formArrayName=\"items\" cdkDropList (cdkDropListDropped)=\"dropBookDemoLinks($event)\">\n <div\n *ngFor=\"let link of f['book_demo'].get('items')['controls']; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link Title\" name=\"title\" [controlId]=\"'domain-build-book_demo-link-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link URL\" name=\"url\" [controlId]=\"'domain-build-book_demo-link-url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-url-' + i\" class=\"form-control\" formControlName=\"url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n ngbTooltip=\"Remove\"\n (click)=\"removeBookDemoLink(i)\"\n (keydown.enter)=\"removeBookDemoLink(i)\"\n (keydown.space)=\"removeBookDemoLink(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">\n + Add Book Demo Link\n </button>\n </div>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"12\">\n <p-accordion-header>Navbar Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n <h4 class=\"mb-3\">Navbar Section</h4>\n\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(navbarItems, $event)\">\n <div\n *ngFor=\"let item of navbarItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-navbar-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-navbar-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-path-' + i\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeNavbarItem(i)\"\n (keydown.enter)=\"removeNavbarItem(i)\"\n (keydown.space)=\"removeNavbarItem(i)\"\n ngbTooltip=\"Remove Navbar Item\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getNavbarSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\"\n >\n <div\n *ngFor=\"let sub of getNavbarSubtitles(i).controls; let j = index\"\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeSubtitle(i, j)\"\n (keydown.enter)=\"removeSubtitle(i, j)\"\n (keydown.space)=\"removeSubtitle(i, j)\"\n ngbTooltip=\"Remove Subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n + Add Subtitle\n </button>\n </div>\n </div>\n\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">\n + Add Navbar Item\n </button>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n <p-accordion-panel value=\"13\">\n <p-accordion-header>Footer Links Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n <h4 class=\"mb-3\">Footer Links Section</h4>\n\n <div\n formArrayName=\"items\"\n class=\"col-12\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(footerLinksItems, $event)\"\n >\n <div\n *ngFor=\"let item of footerLinksItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-footer-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-footer-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-path-' + i\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterLinkItem(i)\"\n (keydown.enter)=\"removeFooterLinkItem(i)\"\n (keydown.space)=\"removeFooterLinkItem(i)\"\n ngbTooltip=\"Remove Footer Item\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n </div>\n\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getFooterSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropFooterSubtitles(i, $event)\"\n >\n <div\n *ngFor=\"let sub of getFooterSubtitles(i).controls; let j = index\"\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\" class=\"form-control\" formControlName=\"path\" />\n </pw-input-container>\n </div>\n\n\n\n\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterSubtitle(i, j)\"\n (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n (keydown.space)=\"removeFooterSubtitle(i, j)\"\n ngbTooltip=\"Remove Subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder subtitle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"btn btn-sm btn-primary mt-2\"\n (click)=\"addFooterSubtitle(i)\"\n >\n + Add Subtitle\n </button>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"btn btn-primary mt-2 mb-2\"\n (click)=\"addFooterLinkItem()\"\n >\n + Add Footer Link\n </button>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n\n\n\n <p-accordion-panel value=\"14\">\n <p-accordion-header>Guides Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n <h4 class=\"mb-3\">Guides Section</h4>\n\n <div formArrayName=\"items\" class=\"col-12\">\n <div cdkDropList (cdkDropListDropped)=\"dropItems(guidesItems, $event)\">\n <div\n *ngFor=\"let item of guidesItems.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"border p-3 mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-start\">\n\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-guide-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-title-' + i\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n\n <pw-input-container label=\"Button Text\" class=\"col-md-6\" name=\"button_text\" [controlId]=\"'domain-build-guide-button_text-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-button_text-' + i\" class=\"form-control\" formControlName=\"button_text\" />\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"row mt-2\">\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-guide-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-image_url-' + i\" class=\"form-control\" formControlName=\"image_url\" />\n </pw-input-container>\n\n <pw-input-container label=\"Guide URL\" class=\"col-md-6\" name=\"guide_url\" [controlId]=\"'domain-build-guide-guide_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-guide_url-' + i\" class=\"form-control\" formControlName=\"guide_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"row mt-2\">\n <pw-input-container label=\"Description\" class=\"col-md-11\" name=\"description\" [controlId]=\"'domain-build-guide-description-' + i\">\n <textarea\n [id]=\"'domain-build-guide-description-' + i\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n ></textarea>\n </pw-input-container>\n\n <div class=\"col-md-1 d-flex align-items-start justify-content-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeGuideItem(i)\"\n (keydown.enter)=\"removeGuideItem(i)\"\n (keydown.space)=\"removeGuideItem(i)\"\n ngbTooltip=\"Remove Guide\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">\n + Add Guide\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n\n <p-accordion-panel value=\"15\">\n <p-accordion-header>AB Tests Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\">\n <h4 class=\"mb-3\">AB Tests</h4>\n <div formArrayName=\"ab_tests\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(abTests, $event)\">\n <div\n *ngFor=\"let abTest of abTests.controls; let i = index\"\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3\"\n cdkDrag\n >\n <pw-input-container label=\"Description\" class=\"col-md-5\" name=\"description\" [controlId]=\"'domain-build-ab_test-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-description-' + i\" class=\"form-control\" formControlName=\"description\" />\n </pw-input-container>\n\n <pw-input-container label=\"Experiment Name\" class=\"col-md-6\" name=\"experiment_name\" [controlId]=\"'domain-build-ab_test-experiment_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-experiment_name-' + i\" class=\"form-control\" formControlName=\"experiment_name\" />\n </pw-input-container>\n\n\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n ngbTooltip=\"Drag to reorder\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <pw-input-container label=\"DB Shard\" class=\"col-md-6\" name=\"db_shard\" [controlId]=\"'domain-build-ab_test-db_shard-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-db_shard-' + i\" class=\"form-control\" formControlName=\"db_shard\" />\n </pw-input-container>\n\n <pw-input-container label=\"Microservice Name\" class=\"col-md-6\" name=\"microservice_name\" [controlId]=\"'domain-build-ab_test-microservice_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-microservice_name-' + i\" class=\"form-control\" formControlName=\"microservice_name\" />\n </pw-input-container>\n\n <div class=\"col-md-12 text-end mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeAbTest(i)\"\n (keydown.enter)=\"removeAbTest(i)\"\n (keydown.space)=\"removeAbTest(i)\"\n ngbTooltip=\"Remove AB Test\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addAbTest()\">+ Add AB Test</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n\n\n\n\n\n <p-accordion-panel value=\"16\">\n <p-accordion-header>Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n <div class=\"text-end\" *ngIf=\"shardUrl\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle\"></i>\n </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n </div>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\" controlId=\"domain-build-cs_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete [attr.aria-labelledby]=\"'domain-build-cs_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" field=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n placeholder=\"Search Product\" [inputStyle]=\"\n form.get('cs_product_id').touched &&\n form.get('cs_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : { border: '1px solid gray' }\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\" controlId=\"domain-build-cs_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_crm_source_id-label'\" formControlName=\"cs_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\" controlId=\"domain-build-cs_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n <p-select [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_pdf_source_id-label'\" formControlName=\"cs_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" controlId=\"domain-build-cs_video_url\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_video_url\" class=\"form-control\" formControlName=\"cs_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\" controlId=\"domain-build-cs_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_book_demo_url\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\" controlId=\"domain-build-cs_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n <textarea id=\"domain-build-cs_cta_iframe\" class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\" controlId=\"domain-build-cs_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n <textarea id=\"domain-build-cs_join_message\" class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\" controlId=\"domain-build-cs_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-cs_pdf_download_text\" class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['cs_pdf_download_text'].errors\n }\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image-label\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image2-label\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_pdf_image-label\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg-label\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg2-label\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span class=\"info-circle\">\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\n }}</span>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </p-accordion>\n </div>\n\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n </div>\n </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n\n\n<ng-template #partnerCropper let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Partner Image</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n <pw-image-cropper\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n (closeEvent)=\"onClosePartnerModal()\"\n ></pw-image-cropper>\n </div>\n</ng-template>\n" }]
|
|
1393
1397
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }, { type: i1$2.ProductService }, { type: i2$1.NgbModal }, { type: i3$2.FormBuilder }], propDecorators: { uploader: [{
|
|
1394
1398
|
type: ViewChildren,
|
|
1395
1399
|
args: [CustomUploaderComponent]
|
|
@@ -1606,11 +1610,11 @@ class DomainConfigSecurityComponent extends BaseDomainConfigComponent {
|
|
|
1606
1610
|
return 'Social';
|
|
1607
1611
|
}
|
|
1608
1612
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DomainConfigSecurityComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1609
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: DomainConfigSecurityComponent, isStandalone: false, selector: "pw-domain-config-security", usesInheritance: true, ngImport: i0, template: "<h3>Social Login & Single Sign On (SSO)</h3>\n<div>\n <p class=\"mb-5\">Enter the credentials for the Social Logins you want to enable on the login page.</p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"data?.host_name\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"mt-3\"></div>\n <p-accordion>\n <p-accordionTab [header]=\"'Apple'\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginAppleClientId' | transloco\"\n name=\"oauth_login_apple_client_id\" controlId=\"domain-security-oauth_login_apple_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_apple_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_apple_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_apple_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab [header]=\"'Facebook'\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginFacebookClientId' | transloco\"\n name=\"oauth_login_facebook_client_id\" controlId=\"domain-security-oauth_login_facebook_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_facebook_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_facebook_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_facebook_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginFacebookSecret' | transloco\"\n name=\"oauth_login_facebook_secret\" controlId=\"domain-security-oauth_login_facebook_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_facebook_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_facebook_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_facebook_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab [header]=\"'Google'\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginGoogleClientId' | transloco\"\n name=\"oauth_login_google_client_id\" controlId=\"domain-security-oauth_login_google_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_google_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_google_client_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_google_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginGoogleSecret' | transloco\"\n name=\"oauth_login_google_secret\" controlId=\"domain-security-oauth_login_google_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_google_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_google_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_google_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab [header]=\"'LinkedIn'\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginLinkedInClientId' | transloco\"\n name=\"oauth_login_linkedin_client_id\" controlId=\"domain-security-oauth_login_linkedin_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_linkedin_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_linkedin_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_linkedin_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginLinkedInSecret' | transloco\"\n name=\"oauth_login_linkedin_secret\" controlId=\"domain-security-oauth_login_linkedin_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_linkedin_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_linkedin_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_linkedin_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab [header]=\"'Microsoft'\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginMicrosoftClientId' | transloco\"\n name=\"oauth_login_microsoft_client_id\" controlId=\"domain-security-oauth_login_microsoft_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_microsoft_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_microsoft_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_microsoft_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginMicrosoftSecret' | transloco\"\n name=\"oauth_login_microsoft_secret\" controlId=\"domain-security-oauth_login_microsoft_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_microsoft_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_microsoft_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_microsoft_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab [header]=\"'Twitter'\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginTwitterClientId' | transloco\"\n name=\"oauth_login_twitter_client_id\" controlId=\"domain-security-oauth_login_twitter_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_twitter_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_twitter_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_twitter_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginTwitterSecret' | transloco\"\n name=\"oauth_login_twitter_secret\" controlId=\"domain-security-oauth_login_twitter_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_twitter_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_twitter_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_twitter_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab [header]=\"'Cognito SSO'\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoSite' | transloco\"\n name=\"oauth_login_cognito_site\" controlId=\"domain-security-oauth_login_cognito_site\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_site\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_site\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_cognito_site'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoUserPoolId' | transloco\"\n name=\"oauth_login_cognito_user_pool_id\" controlId=\"domain-security-oauth_login_cognito_user_pool_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_user_pool_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_user_pool_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_cognito_user_pool_id'].errors\n }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoAppClientId' | transloco\"\n name=\"oauth_login_cognito_app_client_id\" controlId=\"domain-security-oauth_login_cognito_app_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_app_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_app_client_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_cognito_app_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoAppClientSecret' | transloco\"\n name=\"oauth_login_cognito_app_client_secret\" controlId=\"domain-security-oauth_login_cognito_app_client_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_app_client_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_app_client_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_cognito_app_client_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthAwsCognitoAccessKeyId' | transloco\"\n name=\"oauth_aws_cognito_access_key_id\" controlId=\"domain-security-oauth_aws_cognito_access_key_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_aws_cognito_access_key_id\"\n class=\"form-control\"\n formControlName=\"oauth_aws_cognito_access_key_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_aws_cognito_access_key_id'].errors\n }\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthAwsCognitoSecretAccessKey' | transloco\"\n name=\"oauth_aws_cognito_secret_access_key\" controlId=\"domain-security-oauth_aws_cognito_secret_access_key\">\n <input type=\"text\"\n id=\"domain-security-oauth_aws_cognito_secret_access_key\"\n class=\"form-control\"\n formControlName=\"oauth_aws_cognito_secret_access_key\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_aws_cognito_secret_access_key'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordionTab>\n </p-accordion>\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n </div>\n </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "component", type: i7.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i7.AccordionTab, selector: "p-accordionTab, p-accordion-tab, p-accordiontab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { 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: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i1$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i1$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
|
|
1613
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: DomainConfigSecurityComponent, isStandalone: false, selector: "pw-domain-config-security", usesInheritance: true, ngImport: i0, template: "<h3>Social Login & Single Sign On (SSO)</h3>\n<div>\n <p class=\"mb-5\">Enter the credentials for the Social Logins you want to enable on the login page.</p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"data?.host_name\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"mt-3\"></div>\n <p-accordion>\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Apple</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginAppleClientId' | transloco\"\n name=\"oauth_login_apple_client_id\" controlId=\"domain-security-oauth_login_apple_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_apple_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_apple_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_apple_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"1\">\n <p-accordion-header>Facebook</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginFacebookClientId' | transloco\"\n name=\"oauth_login_facebook_client_id\" controlId=\"domain-security-oauth_login_facebook_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_facebook_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_facebook_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_facebook_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginFacebookSecret' | transloco\"\n name=\"oauth_login_facebook_secret\" controlId=\"domain-security-oauth_login_facebook_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_facebook_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_facebook_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_facebook_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"2\">\n <p-accordion-header>Google</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginGoogleClientId' | transloco\"\n name=\"oauth_login_google_client_id\" controlId=\"domain-security-oauth_login_google_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_google_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_google_client_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_google_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginGoogleSecret' | transloco\"\n name=\"oauth_login_google_secret\" controlId=\"domain-security-oauth_login_google_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_google_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_google_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_google_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"3\">\n <p-accordion-header>LinkedIn</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginLinkedInClientId' | transloco\"\n name=\"oauth_login_linkedin_client_id\" controlId=\"domain-security-oauth_login_linkedin_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_linkedin_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_linkedin_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_linkedin_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginLinkedInSecret' | transloco\"\n name=\"oauth_login_linkedin_secret\" controlId=\"domain-security-oauth_login_linkedin_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_linkedin_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_linkedin_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_linkedin_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"4\">\n <p-accordion-header>Microsoft</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginMicrosoftClientId' | transloco\"\n name=\"oauth_login_microsoft_client_id\" controlId=\"domain-security-oauth_login_microsoft_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_microsoft_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_microsoft_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_microsoft_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginMicrosoftSecret' | transloco\"\n name=\"oauth_login_microsoft_secret\" controlId=\"domain-security-oauth_login_microsoft_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_microsoft_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_microsoft_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_microsoft_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"5\">\n <p-accordion-header>Twitter</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginTwitterClientId' | transloco\"\n name=\"oauth_login_twitter_client_id\" controlId=\"domain-security-oauth_login_twitter_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_twitter_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_twitter_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_twitter_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginTwitterSecret' | transloco\"\n name=\"oauth_login_twitter_secret\" controlId=\"domain-security-oauth_login_twitter_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_twitter_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_twitter_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_twitter_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"6\">\n <p-accordion-header>Cognito SSO</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoSite' | transloco\"\n name=\"oauth_login_cognito_site\" controlId=\"domain-security-oauth_login_cognito_site\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_site\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_site\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_cognito_site'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoUserPoolId' | transloco\"\n name=\"oauth_login_cognito_user_pool_id\" controlId=\"domain-security-oauth_login_cognito_user_pool_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_user_pool_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_user_pool_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_cognito_user_pool_id'].errors\n }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoAppClientId' | transloco\"\n name=\"oauth_login_cognito_app_client_id\" controlId=\"domain-security-oauth_login_cognito_app_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_app_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_app_client_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_cognito_app_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoAppClientSecret' | transloco\"\n name=\"oauth_login_cognito_app_client_secret\" controlId=\"domain-security-oauth_login_cognito_app_client_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_app_client_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_app_client_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_cognito_app_client_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthAwsCognitoAccessKeyId' | transloco\"\n name=\"oauth_aws_cognito_access_key_id\" controlId=\"domain-security-oauth_aws_cognito_access_key_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_aws_cognito_access_key_id\"\n class=\"form-control\"\n formControlName=\"oauth_aws_cognito_access_key_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_aws_cognito_access_key_id'].errors\n }\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthAwsCognitoSecretAccessKey' | transloco\"\n name=\"oauth_aws_cognito_secret_access_key\" controlId=\"domain-security-oauth_aws_cognito_secret_access_key\">\n <input type=\"text\"\n id=\"domain-security-oauth_aws_cognito_secret_access_key\"\n class=\"form-control\"\n formControlName=\"oauth_aws_cognito_secret_access_key\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_aws_cognito_secret_access_key'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </p-accordion>\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n </div>\n </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "component", type: i7.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i7.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i7.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i7.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { 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: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i1$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i1$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
|
|
1610
1614
|
}
|
|
1611
1615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DomainConfigSecurityComponent, decorators: [{
|
|
1612
1616
|
type: Component,
|
|
1613
|
-
args: [{ selector: 'pw-domain-config-security', standalone: false, template: "<h3>Social Login & Single Sign On (SSO)</h3>\n<div>\n <p class=\"mb-5\">Enter the credentials for the Social Logins you want to enable on the login page.</p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"data?.host_name\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"mt-3\"></div>\n <p-accordion>\n <p-accordionTab [header]=\"'Apple'\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginAppleClientId' | transloco\"\n name=\"oauth_login_apple_client_id\" controlId=\"domain-security-oauth_login_apple_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_apple_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_apple_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_apple_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab [header]=\"'Facebook'\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginFacebookClientId' | transloco\"\n name=\"oauth_login_facebook_client_id\" controlId=\"domain-security-oauth_login_facebook_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_facebook_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_facebook_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_facebook_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginFacebookSecret' | transloco\"\n name=\"oauth_login_facebook_secret\" controlId=\"domain-security-oauth_login_facebook_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_facebook_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_facebook_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_facebook_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab [header]=\"'Google'\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginGoogleClientId' | transloco\"\n name=\"oauth_login_google_client_id\" controlId=\"domain-security-oauth_login_google_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_google_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_google_client_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_google_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginGoogleSecret' | transloco\"\n name=\"oauth_login_google_secret\" controlId=\"domain-security-oauth_login_google_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_google_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_google_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_google_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab [header]=\"'LinkedIn'\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginLinkedInClientId' | transloco\"\n name=\"oauth_login_linkedin_client_id\" controlId=\"domain-security-oauth_login_linkedin_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_linkedin_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_linkedin_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_linkedin_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginLinkedInSecret' | transloco\"\n name=\"oauth_login_linkedin_secret\" controlId=\"domain-security-oauth_login_linkedin_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_linkedin_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_linkedin_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_linkedin_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab [header]=\"'Microsoft'\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginMicrosoftClientId' | transloco\"\n name=\"oauth_login_microsoft_client_id\" controlId=\"domain-security-oauth_login_microsoft_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_microsoft_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_microsoft_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_microsoft_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginMicrosoftSecret' | transloco\"\n name=\"oauth_login_microsoft_secret\" controlId=\"domain-security-oauth_login_microsoft_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_microsoft_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_microsoft_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_microsoft_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab [header]=\"'Twitter'\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginTwitterClientId' | transloco\"\n name=\"oauth_login_twitter_client_id\" controlId=\"domain-security-oauth_login_twitter_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_twitter_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_twitter_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_twitter_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginTwitterSecret' | transloco\"\n name=\"oauth_login_twitter_secret\" controlId=\"domain-security-oauth_login_twitter_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_twitter_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_twitter_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_twitter_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordionTab>\n <p-accordionTab [header]=\"'Cognito SSO'\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoSite' | transloco\"\n name=\"oauth_login_cognito_site\" controlId=\"domain-security-oauth_login_cognito_site\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_site\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_site\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_cognito_site'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoUserPoolId' | transloco\"\n name=\"oauth_login_cognito_user_pool_id\" controlId=\"domain-security-oauth_login_cognito_user_pool_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_user_pool_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_user_pool_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_cognito_user_pool_id'].errors\n }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoAppClientId' | transloco\"\n name=\"oauth_login_cognito_app_client_id\" controlId=\"domain-security-oauth_login_cognito_app_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_app_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_app_client_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_cognito_app_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoAppClientSecret' | transloco\"\n name=\"oauth_login_cognito_app_client_secret\" controlId=\"domain-security-oauth_login_cognito_app_client_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_app_client_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_app_client_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_cognito_app_client_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthAwsCognitoAccessKeyId' | transloco\"\n name=\"oauth_aws_cognito_access_key_id\" controlId=\"domain-security-oauth_aws_cognito_access_key_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_aws_cognito_access_key_id\"\n class=\"form-control\"\n formControlName=\"oauth_aws_cognito_access_key_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_aws_cognito_access_key_id'].errors\n }\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthAwsCognitoSecretAccessKey' | transloco\"\n name=\"oauth_aws_cognito_secret_access_key\" controlId=\"domain-security-oauth_aws_cognito_secret_access_key\">\n <input type=\"text\"\n id=\"domain-security-oauth_aws_cognito_secret_access_key\"\n class=\"form-control\"\n formControlName=\"oauth_aws_cognito_secret_access_key\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_aws_cognito_secret_access_key'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordionTab>\n </p-accordion>\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n </div>\n </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n" }]
|
|
1617
|
+
args: [{ selector: 'pw-domain-config-security', standalone: false, template: "<h3>Social Login & Single Sign On (SSO)</h3>\n<div>\n <p class=\"mb-5\">Enter the credentials for the Social Logins you want to enable on the login page.</p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"data?.host_name\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"mt-3\"></div>\n <p-accordion>\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Apple</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginAppleClientId' | transloco\"\n name=\"oauth_login_apple_client_id\" controlId=\"domain-security-oauth_login_apple_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_apple_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_apple_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_apple_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"1\">\n <p-accordion-header>Facebook</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginFacebookClientId' | transloco\"\n name=\"oauth_login_facebook_client_id\" controlId=\"domain-security-oauth_login_facebook_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_facebook_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_facebook_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_facebook_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginFacebookSecret' | transloco\"\n name=\"oauth_login_facebook_secret\" controlId=\"domain-security-oauth_login_facebook_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_facebook_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_facebook_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_facebook_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"2\">\n <p-accordion-header>Google</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginGoogleClientId' | transloco\"\n name=\"oauth_login_google_client_id\" controlId=\"domain-security-oauth_login_google_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_google_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_google_client_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_google_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginGoogleSecret' | transloco\"\n name=\"oauth_login_google_secret\" controlId=\"domain-security-oauth_login_google_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_google_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_google_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_google_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"3\">\n <p-accordion-header>LinkedIn</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginLinkedInClientId' | transloco\"\n name=\"oauth_login_linkedin_client_id\" controlId=\"domain-security-oauth_login_linkedin_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_linkedin_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_linkedin_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_linkedin_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginLinkedInSecret' | transloco\"\n name=\"oauth_login_linkedin_secret\" controlId=\"domain-security-oauth_login_linkedin_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_linkedin_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_linkedin_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_linkedin_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"4\">\n <p-accordion-header>Microsoft</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginMicrosoftClientId' | transloco\"\n name=\"oauth_login_microsoft_client_id\" controlId=\"domain-security-oauth_login_microsoft_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_microsoft_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_microsoft_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_microsoft_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginMicrosoftSecret' | transloco\"\n name=\"oauth_login_microsoft_secret\" controlId=\"domain-security-oauth_login_microsoft_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_microsoft_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_microsoft_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_microsoft_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"5\">\n <p-accordion-header>Twitter</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginTwitterClientId' | transloco\"\n name=\"oauth_login_twitter_client_id\" controlId=\"domain-security-oauth_login_twitter_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_twitter_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_twitter_client_id\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_twitter_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginTwitterSecret' | transloco\"\n name=\"oauth_login_twitter_secret\" controlId=\"domain-security-oauth_login_twitter_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_twitter_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_twitter_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_twitter_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"6\">\n <p-accordion-header>Cognito SSO</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoSite' | transloco\"\n name=\"oauth_login_cognito_site\" controlId=\"domain-security-oauth_login_cognito_site\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_site\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_site\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['oauth_login_cognito_site'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoUserPoolId' | transloco\"\n name=\"oauth_login_cognito_user_pool_id\" controlId=\"domain-security-oauth_login_cognito_user_pool_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_user_pool_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_user_pool_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_cognito_user_pool_id'].errors\n }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoAppClientId' | transloco\"\n name=\"oauth_login_cognito_app_client_id\" controlId=\"domain-security-oauth_login_cognito_app_client_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_app_client_id\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_app_client_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_cognito_app_client_id'].errors\n }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthLoginCognitoAppClientSecret' | transloco\"\n name=\"oauth_login_cognito_app_client_secret\" controlId=\"domain-security-oauth_login_cognito_app_client_secret\">\n <input type=\"text\"\n id=\"domain-security-oauth_login_cognito_app_client_secret\"\n class=\"form-control\"\n formControlName=\"oauth_login_cognito_app_client_secret\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_login_cognito_app_client_secret'].errors\n }\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthAwsCognitoAccessKeyId' | transloco\"\n name=\"oauth_aws_cognito_access_key_id\" controlId=\"domain-security-oauth_aws_cognito_access_key_id\">\n <input type=\"text\"\n id=\"domain-security-oauth_aws_cognito_access_key_id\"\n class=\"form-control\"\n formControlName=\"oauth_aws_cognito_access_key_id\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_aws_cognito_access_key_id'].errors\n }\" />\n </pw-input-container>\n </div>\n\n\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.OAuthAwsCognitoSecretAccessKey' | transloco\"\n name=\"oauth_aws_cognito_secret_access_key\" controlId=\"domain-security-oauth_aws_cognito_secret_access_key\">\n <input type=\"text\"\n id=\"domain-security-oauth_aws_cognito_secret_access_key\"\n class=\"form-control\"\n formControlName=\"oauth_aws_cognito_secret_access_key\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['oauth_aws_cognito_secret_access_key'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </p-accordion>\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n </div>\n </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n" }]
|
|
1614
1618
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }] });
|
|
1615
1619
|
|
|
1616
1620
|
class DomainConfigSocialComponent extends BaseDomainConfigComponent {
|
|
@@ -5037,7 +5041,7 @@ class ProductDetailsComponent extends AppBaseComponent {
|
|
|
5037
5041
|
super.ngOnDestroy();
|
|
5038
5042
|
}
|
|
5039
5043
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ProductDetailsComponent, deps: [{ token: i0.Injector }, { token: i1$2.ProductService }, { token: i2$1.NgbModal }, { token: i1.AdminService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5040
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: ProductDetailsComponent, isStandalone: false, selector: "pw-product-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n aria-hidden=\"true\"></i></a>\n <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"my-4\" *ngIf=\"!isLoading\">\n <div class=\"mb-5\">\n <p-accordion>\n <p-accordionTab [header]=\"'How To'\">\n <div class=\"row\">\n <div class=\"col-12 col-md-6\">\n <h4>Product / Feature logic</h4>\n <p> Logic for back-end/front-end permissions binding:\n <br /> * product.category (these are features) => type of product, i.e., seat_pricing or item_pricing\n <br /> * product.feature_key => this describes the main feature\n <br /> * product.permission_key => users can be subscribed to only one product of same permission_key\n <br /> * product.product_key => this is unique to each product, it defines the permission for frontend binding\n <br /> * Example of permission => {{ 'Pages.Product.{permission_key}.{product_key}' }}\n <br /> * If it's a feature associated to an existing project, you can to set the \"dependency product\" accordingly. </p>\n </div>\n <div class=\"col-12 col-md-6\">\n <h4>If it's a Free Product</h4>\n <p> Stripe Plan needs to be nil. <br /> \"Price\" per Unit needs to be set as 0. <br /> \"Trial Days\" needs\n to be something like 99999. <br /> The product should be set as \"visible===false\". </p>\n </div>\n </div>\n </p-accordionTab>\n </p-accordion>\n </div>\n <div class=\"row\" *ngIf=\"id\">\n <div class=\"col-md-6\">\n <div class=\"text-center mt-5\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n </h4>\n <img [src]=\"fullLogo\" alt=\"Demo Logo\" class=\"image full-logo w-100 h-100\"\n (error)=\"handleImageError($event, 'assets/img/icons/demo_logo1.png')\" />\n <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"text-center mt-5\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n </h4>\n <img [src]=\"squaredLogo\" alt=\"Company Logo\" width=\"70\" class=\"squared_logo\" height=\"70\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-md-6\">\n <div class=\"row\">\n <div class=\"col-md-6\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n [label]=\"'Label.Name' | transloco\" class=\"col-md-6 p-0\" name=\"name\" controlId=\"product-name\"\n [isLeftTooltip]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-name\" class=\"form-control\" formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-md-6\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n [label]=\"'Admin.Products.NickName' | transloco\" class=\"col-md-6 p-0\" name=\"nickname\" controlId=\"product-nickname\" [errorMsg]=\"\n 'Admin.Products.Validation.NickName' | transloco\n \">\n <input type=\"text\" id=\"product-nickname\" class=\"form-control\" formControlName=\"nickname\" [ngClass]=\"{\n 'is-invalid': submitted && f['nickname'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"row\">\n <div class=\"mb-3 col-12 col-md-6\">\n <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" class=\"col-md-6 p-0\" name=\"min_units\" controlId=\"product-min_units\"\n [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n <input type=\"number\" id=\"product-min_units\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['min_units'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-12 col-md-6\">\n <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" class=\"col-md-6 p-0\" name=\"max_units\" controlId=\"product-max_units\"\n [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n <input type=\"number\" id=\"product-max_units\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_units'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <span class=\"pw-label-style info-circle\" id=\"product-dependency_products-label\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n transloco }}</span>\n </span>\n <p-multiSelect [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n [attr.aria-labelledby]=\"'product-dependency_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n [label]=\"'Admin.Products.StripePlan' | transloco\" class=\"col-md-6 p-0\" name=\"stripe_plan_id\" controlId=\"product-stripe_plan_id\">\n <input type=\"text\" id=\"product-stripe_plan_id\" class=\"form-control\" formControlName=\"stripe_plan_id\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-price_per_unit\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\" [ngClass]=\"{\n 'is-invalid': submitted && f['price_per_unit'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n [label]=\"'Admin.Products.TrialDays' | transloco\" class=\"col-md-6 p-0\" name=\"trial_days\" controlId=\"product-trial_days\"\n [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n <input type=\"number\" id=\"product-trial_days\" min=\"0\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_days'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n [label]=\"'Admin.Products.MaxTrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits_trial\" controlId=\"product-max_hits_trial\">\n <input type=\"number\" id=\"product-max_hits_trial\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_hits_trial'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n [label]=\"'Admin.Products.TrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits\" controlId=\"product-max_hits\">\n <input type=\"number\" id=\"product-max_hits\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-12\" id=\"descriptionEditor\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-12\" id=\"signupInstructionsEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-12\" id=\"signupEmployeesEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n 'is-invalid':\n submitted && f['signup_instruction_employees'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" controlId=\"product-permission_key\" [errorMsg]=\"\n 'Admin.Products.Validation.PermissionKey' | transloco\n \">\n <input type=\"text\" id=\"product-permission_key\" class=\"form-control\" [ngClass]=\"{\n 'is-invalid': submitted && f['permission_key'].errors\n }\" formControlName=\"permission_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\" controlId=\"product-feature_key\"\n [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n <input type=\"text\" id=\"product-feature_key\" class=\"form-control\" [ngClass]=\"{\n 'is-invalid': submitted && f['feature_key'].errors\n }\" formControlName=\"feature_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\" class=\"col-md-6 p-0\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.Products.Tooltip.PermissionKey' | transloco\n \" name=\"product_key\" controlId=\"product-product_key\"\n [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n <input type=\"text\" id=\"product-product_key\" class=\"form-control\" formControlName=\"product_key\" [ngClass]=\"{\n 'is-invalid': submitted && f['product_key'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.Category' | transloco\" class=\"col-md-6 p-0\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.Products.Tooltip.PermissionKey' | transloco\n \" name=\"category\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n <p-select [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n [label]=\"'Admin.Products.BillingFrequency' | transloco\" class=\"col-md-6 p-0\" name=\"billing_frequency\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n <p-select [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n [required]=\"true\" [ngClass]=\"{\n 'is-invalid': submitted && f['billing_frequency'].errors\n }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.DocumentationUrl' | transloco\"\n [label]=\"'Admin.Products.DocumentationUrl' | transloco\" class=\"col-md-6 p-0\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\" [ngClass]=\"{\n 'is-invalid': submitted && f['documentation_url'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n [options]=\"allTos\"\n formControlName=\"product_privacy_service_id\"\n [placeholder]=\"'Select Privacy Service'\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n [options]=\"productsList\"\n formControlName=\"master_product_id\"\n [placeholder]=\"'Select Master Product'\"\n optionValue=\"value\"\n optionLabel=\"label\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"product-roles-label\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n transloco }}</span>\n </span>\n <p-multiSelect [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiSelect>\n </div>\n <div class=\"col-12 col-md-4\" *ngIf=\"supportedCurrency$ | async as currency\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-currency-label'\"\n [options]=\"currency['regions']\"\n formControlName=\"currency\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n [placeholder]=\"'Select Currency'\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\" *ngIf=\"supportedRegions$ | async as region\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-region-label'\"\n [options]=\"region['regions']\"\n formControlName=\"region\"\n [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n [placeholder]=\"'Select Region'\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\" controlId=\"product-gitlab_service_desk_email\">\n <input type=\"text\" id=\"product-gitlab_service_desk_email\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n <p-multiSelect [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n [attr.aria-labelledby]=\"'product-partner_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n [options]=\"prorationBehaviors\"\n formControlName=\"proration_behavior\"\n [placeholder]=\"'Select Proration Behavior'\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n [options]=\"unsubscribeBehaviors\"\n formControlName=\"unsubscribe_stripe_behavior\"\n [placeholder]=\"'Select Unsubscribe Stripe Behavior'\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <!--start toggles -->\n <div class=\"col-12 row mt-4\">\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n [attr.aria-labelledby]=\"'product-active-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['multiple_allowed'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n [attr.aria-labelledby]=\"'product-visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n [attr.aria-labelledby]=\"'product-members_visible-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['members_visible'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['chat_visible'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['is_master_product'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n <!-- end toggles -->\n </div>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n transloco }} </button>\n <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n | transloco }} </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n</div>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n", styles: [".pw-label-style.info-circle{display:inline-block;line-height:1.5}.pw-label-style.info-circle:after{top:-7px}.nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"], dependencies: [{ kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i7.AccordionTab, selector: "p-accordionTab, p-accordion-tab, p-accordiontab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "component", type: i3.Select, selector: "p-select", 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", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i13.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i1$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3$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.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
|
|
5044
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: ProductDetailsComponent, isStandalone: false, selector: "pw-product-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n aria-hidden=\"true\"></i></a>\n <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"my-4\" *ngIf=\"!isLoading\">\n <div class=\"mb-5\">\n <p-accordion>\n <p-accordion-panel value=\"0\">\n <p-accordion-header>How To</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-md-6\">\n <h4>Product / Feature logic</h4>\n <p> Logic for back-end/front-end permissions binding:\n <br /> * product.category (these are features) => type of product, i.e., seat_pricing or item_pricing\n <br /> * product.feature_key => this describes the main feature\n <br /> * product.permission_key => users can be subscribed to only one product of same permission_key\n <br /> * product.product_key => this is unique to each product, it defines the permission for frontend binding\n <br /> * Example of permission => {{ 'Pages.Product.{permission_key}.{product_key}' }}\n <br /> * If it's a feature associated to an existing project, you can to set the \"dependency product\" accordingly. </p>\n </div>\n <div class=\"col-12 col-md-6\">\n <h4>If it's a Free Product</h4>\n <p> Stripe Plan needs to be nil. <br /> \"Price\" per Unit needs to be set as 0. <br /> \"Trial Days\" needs\n to be something like 99999. <br /> The product should be set as \"visible===false\". </p>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </p-accordion>\n </div>\n <div class=\"row\" *ngIf=\"id\">\n <div class=\"col-md-6\">\n <div class=\"text-center mt-5\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n </h4>\n <img [src]=\"fullLogo\" alt=\"Demo Logo\" class=\"image full-logo w-100 h-100\"\n (error)=\"handleImageError($event, 'assets/img/icons/demo_logo1.png')\" />\n <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"text-center mt-5\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n </h4>\n <img [src]=\"squaredLogo\" alt=\"Company Logo\" width=\"70\" class=\"squared_logo\" height=\"70\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-md-6\">\n <div class=\"row\">\n <div class=\"col-md-6\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n [label]=\"'Label.Name' | transloco\" class=\"col-md-6 p-0\" name=\"name\" controlId=\"product-name\"\n [isLeftTooltip]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-name\" class=\"form-control\" formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-md-6\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n [label]=\"'Admin.Products.NickName' | transloco\" class=\"col-md-6 p-0\" name=\"nickname\" controlId=\"product-nickname\" [errorMsg]=\"\n 'Admin.Products.Validation.NickName' | transloco\n \">\n <input type=\"text\" id=\"product-nickname\" class=\"form-control\" formControlName=\"nickname\" [ngClass]=\"{\n 'is-invalid': submitted && f['nickname'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"row\">\n <div class=\"mb-3 col-12 col-md-6\">\n <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" class=\"col-md-6 p-0\" name=\"min_units\" controlId=\"product-min_units\"\n [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n <input type=\"number\" id=\"product-min_units\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['min_units'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-12 col-md-6\">\n <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" class=\"col-md-6 p-0\" name=\"max_units\" controlId=\"product-max_units\"\n [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n <input type=\"number\" id=\"product-max_units\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_units'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <span class=\"pw-label-style info-circle\" id=\"product-dependency_products-label\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n transloco }}</span>\n </span>\n <p-multiSelect [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n [attr.aria-labelledby]=\"'product-dependency_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n [label]=\"'Admin.Products.StripePlan' | transloco\" class=\"col-md-6 p-0\" name=\"stripe_plan_id\" controlId=\"product-stripe_plan_id\">\n <input type=\"text\" id=\"product-stripe_plan_id\" class=\"form-control\" formControlName=\"stripe_plan_id\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-price_per_unit\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\" [ngClass]=\"{\n 'is-invalid': submitted && f['price_per_unit'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n [label]=\"'Admin.Products.TrialDays' | transloco\" class=\"col-md-6 p-0\" name=\"trial_days\" controlId=\"product-trial_days\"\n [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n <input type=\"number\" id=\"product-trial_days\" min=\"0\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_days'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n [label]=\"'Admin.Products.MaxTrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits_trial\" controlId=\"product-max_hits_trial\">\n <input type=\"number\" id=\"product-max_hits_trial\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_hits_trial'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n [label]=\"'Admin.Products.TrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits\" controlId=\"product-max_hits\">\n <input type=\"number\" id=\"product-max_hits\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-12\" id=\"descriptionEditor\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-12\" id=\"signupInstructionsEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-12\" id=\"signupEmployeesEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n 'is-invalid':\n submitted && f['signup_instruction_employees'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" controlId=\"product-permission_key\" [errorMsg]=\"\n 'Admin.Products.Validation.PermissionKey' | transloco\n \">\n <input type=\"text\" id=\"product-permission_key\" class=\"form-control\" [ngClass]=\"{\n 'is-invalid': submitted && f['permission_key'].errors\n }\" formControlName=\"permission_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\" controlId=\"product-feature_key\"\n [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n <input type=\"text\" id=\"product-feature_key\" class=\"form-control\" [ngClass]=\"{\n 'is-invalid': submitted && f['feature_key'].errors\n }\" formControlName=\"feature_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\" class=\"col-md-6 p-0\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.Products.Tooltip.PermissionKey' | transloco\n \" name=\"product_key\" controlId=\"product-product_key\"\n [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n <input type=\"text\" id=\"product-product_key\" class=\"form-control\" formControlName=\"product_key\" [ngClass]=\"{\n 'is-invalid': submitted && f['product_key'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.Category' | transloco\" class=\"col-md-6 p-0\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.Products.Tooltip.PermissionKey' | transloco\n \" name=\"category\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n <p-select [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n [label]=\"'Admin.Products.BillingFrequency' | transloco\" class=\"col-md-6 p-0\" name=\"billing_frequency\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n <p-select [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n [required]=\"true\" [ngClass]=\"{\n 'is-invalid': submitted && f['billing_frequency'].errors\n }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.DocumentationUrl' | transloco\"\n [label]=\"'Admin.Products.DocumentationUrl' | transloco\" class=\"col-md-6 p-0\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\" [ngClass]=\"{\n 'is-invalid': submitted && f['documentation_url'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n [options]=\"allTos\"\n formControlName=\"product_privacy_service_id\"\n [placeholder]=\"'Select Privacy Service'\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n [options]=\"productsList\"\n formControlName=\"master_product_id\"\n [placeholder]=\"'Select Master Product'\"\n optionValue=\"value\"\n optionLabel=\"label\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"product-roles-label\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n transloco }}</span>\n </span>\n <p-multiSelect [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiSelect>\n </div>\n <div class=\"col-12 col-md-4\" *ngIf=\"supportedCurrency$ | async as currency\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-currency-label'\"\n [options]=\"currency['regions']\"\n formControlName=\"currency\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n [placeholder]=\"'Select Currency'\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\" *ngIf=\"supportedRegions$ | async as region\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-region-label'\"\n [options]=\"region['regions']\"\n formControlName=\"region\"\n [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n [placeholder]=\"'Select Region'\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\" controlId=\"product-gitlab_service_desk_email\">\n <input type=\"text\" id=\"product-gitlab_service_desk_email\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n <p-multiSelect [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n [attr.aria-labelledby]=\"'product-partner_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n [options]=\"prorationBehaviors\"\n formControlName=\"proration_behavior\"\n [placeholder]=\"'Select Proration Behavior'\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n [options]=\"unsubscribeBehaviors\"\n formControlName=\"unsubscribe_stripe_behavior\"\n [placeholder]=\"'Select Unsubscribe Stripe Behavior'\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <!--start toggles -->\n <div class=\"col-12 row mt-4\">\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n [attr.aria-labelledby]=\"'product-active-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['multiple_allowed'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n [attr.aria-labelledby]=\"'product-visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n [attr.aria-labelledby]=\"'product-members_visible-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['members_visible'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['chat_visible'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['is_master_product'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n <!-- end toggles -->\n </div>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n transloco }} </button>\n <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n | transloco }} </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n</div>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n", styles: [".pw-label-style.info-circle{display:inline-block;line-height:1.5}.pw-label-style.info-circle:after{top:-7px}.nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"], dependencies: [{ kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i7.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i7.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i7.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: i3.Select, selector: "p-select", 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", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i13.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i1$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3$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.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
|
|
5041
5045
|
}
|
|
5042
5046
|
__decorate([
|
|
5043
5047
|
ValidateForm('form'),
|
|
@@ -5047,7 +5051,7 @@ __decorate([
|
|
|
5047
5051
|
], ProductDetailsComponent.prototype, "onSave", null);
|
|
5048
5052
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ProductDetailsComponent, decorators: [{
|
|
5049
5053
|
type: Component,
|
|
5050
|
-
args: [{ selector: 'pw-product-details', standalone: false, template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n aria-hidden=\"true\"></i></a>\n <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"my-4\" *ngIf=\"!isLoading\">\n <div class=\"mb-5\">\n <p-accordion>\n <p-accordionTab [header]=\"'How To'\">\n <div class=\"row\">\n <div class=\"col-12 col-md-6\">\n <h4>Product / Feature logic</h4>\n <p> Logic for back-end/front-end permissions binding:\n <br /> * product.category (these are features) => type of product, i.e., seat_pricing or item_pricing\n <br /> * product.feature_key => this describes the main feature\n <br /> * product.permission_key => users can be subscribed to only one product of same permission_key\n <br /> * product.product_key => this is unique to each product, it defines the permission for frontend binding\n <br /> * Example of permission => {{ 'Pages.Product.{permission_key}.{product_key}' }}\n <br /> * If it's a feature associated to an existing project, you can to set the \"dependency product\" accordingly. </p>\n </div>\n <div class=\"col-12 col-md-6\">\n <h4>If it's a Free Product</h4>\n <p> Stripe Plan needs to be nil. <br /> \"Price\" per Unit needs to be set as 0. <br /> \"Trial Days\" needs\n to be something like 99999. <br /> The product should be set as \"visible===false\". </p>\n </div>\n </div>\n </p-accordionTab>\n </p-accordion>\n </div>\n <div class=\"row\" *ngIf=\"id\">\n <div class=\"col-md-6\">\n <div class=\"text-center mt-5\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n </h4>\n <img [src]=\"fullLogo\" alt=\"Demo Logo\" class=\"image full-logo w-100 h-100\"\n (error)=\"handleImageError($event, 'assets/img/icons/demo_logo1.png')\" />\n <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"text-center mt-5\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n </h4>\n <img [src]=\"squaredLogo\" alt=\"Company Logo\" width=\"70\" class=\"squared_logo\" height=\"70\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-md-6\">\n <div class=\"row\">\n <div class=\"col-md-6\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n [label]=\"'Label.Name' | transloco\" class=\"col-md-6 p-0\" name=\"name\" controlId=\"product-name\"\n [isLeftTooltip]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-name\" class=\"form-control\" formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-md-6\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n [label]=\"'Admin.Products.NickName' | transloco\" class=\"col-md-6 p-0\" name=\"nickname\" controlId=\"product-nickname\" [errorMsg]=\"\n 'Admin.Products.Validation.NickName' | transloco\n \">\n <input type=\"text\" id=\"product-nickname\" class=\"form-control\" formControlName=\"nickname\" [ngClass]=\"{\n 'is-invalid': submitted && f['nickname'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"row\">\n <div class=\"mb-3 col-12 col-md-6\">\n <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" class=\"col-md-6 p-0\" name=\"min_units\" controlId=\"product-min_units\"\n [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n <input type=\"number\" id=\"product-min_units\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['min_units'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-12 col-md-6\">\n <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" class=\"col-md-6 p-0\" name=\"max_units\" controlId=\"product-max_units\"\n [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n <input type=\"number\" id=\"product-max_units\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_units'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <span class=\"pw-label-style info-circle\" id=\"product-dependency_products-label\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n transloco }}</span>\n </span>\n <p-multiSelect [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n [attr.aria-labelledby]=\"'product-dependency_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n [label]=\"'Admin.Products.StripePlan' | transloco\" class=\"col-md-6 p-0\" name=\"stripe_plan_id\" controlId=\"product-stripe_plan_id\">\n <input type=\"text\" id=\"product-stripe_plan_id\" class=\"form-control\" formControlName=\"stripe_plan_id\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-price_per_unit\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\" [ngClass]=\"{\n 'is-invalid': submitted && f['price_per_unit'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n [label]=\"'Admin.Products.TrialDays' | transloco\" class=\"col-md-6 p-0\" name=\"trial_days\" controlId=\"product-trial_days\"\n [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n <input type=\"number\" id=\"product-trial_days\" min=\"0\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_days'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n [label]=\"'Admin.Products.MaxTrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits_trial\" controlId=\"product-max_hits_trial\">\n <input type=\"number\" id=\"product-max_hits_trial\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_hits_trial'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n [label]=\"'Admin.Products.TrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits\" controlId=\"product-max_hits\">\n <input type=\"number\" id=\"product-max_hits\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-12\" id=\"descriptionEditor\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-12\" id=\"signupInstructionsEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-12\" id=\"signupEmployeesEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n 'is-invalid':\n submitted && f['signup_instruction_employees'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" controlId=\"product-permission_key\" [errorMsg]=\"\n 'Admin.Products.Validation.PermissionKey' | transloco\n \">\n <input type=\"text\" id=\"product-permission_key\" class=\"form-control\" [ngClass]=\"{\n 'is-invalid': submitted && f['permission_key'].errors\n }\" formControlName=\"permission_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\" controlId=\"product-feature_key\"\n [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n <input type=\"text\" id=\"product-feature_key\" class=\"form-control\" [ngClass]=\"{\n 'is-invalid': submitted && f['feature_key'].errors\n }\" formControlName=\"feature_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\" class=\"col-md-6 p-0\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.Products.Tooltip.PermissionKey' | transloco\n \" name=\"product_key\" controlId=\"product-product_key\"\n [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n <input type=\"text\" id=\"product-product_key\" class=\"form-control\" formControlName=\"product_key\" [ngClass]=\"{\n 'is-invalid': submitted && f['product_key'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.Category' | transloco\" class=\"col-md-6 p-0\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.Products.Tooltip.PermissionKey' | transloco\n \" name=\"category\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n <p-select [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n [label]=\"'Admin.Products.BillingFrequency' | transloco\" class=\"col-md-6 p-0\" name=\"billing_frequency\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n <p-select [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n [required]=\"true\" [ngClass]=\"{\n 'is-invalid': submitted && f['billing_frequency'].errors\n }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.DocumentationUrl' | transloco\"\n [label]=\"'Admin.Products.DocumentationUrl' | transloco\" class=\"col-md-6 p-0\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\" [ngClass]=\"{\n 'is-invalid': submitted && f['documentation_url'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n [options]=\"allTos\"\n formControlName=\"product_privacy_service_id\"\n [placeholder]=\"'Select Privacy Service'\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n [options]=\"productsList\"\n formControlName=\"master_product_id\"\n [placeholder]=\"'Select Master Product'\"\n optionValue=\"value\"\n optionLabel=\"label\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"product-roles-label\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n transloco }}</span>\n </span>\n <p-multiSelect [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiSelect>\n </div>\n <div class=\"col-12 col-md-4\" *ngIf=\"supportedCurrency$ | async as currency\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-currency-label'\"\n [options]=\"currency['regions']\"\n formControlName=\"currency\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n [placeholder]=\"'Select Currency'\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\" *ngIf=\"supportedRegions$ | async as region\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-region-label'\"\n [options]=\"region['regions']\"\n formControlName=\"region\"\n [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n [placeholder]=\"'Select Region'\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\" controlId=\"product-gitlab_service_desk_email\">\n <input type=\"text\" id=\"product-gitlab_service_desk_email\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n <p-multiSelect [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n [attr.aria-labelledby]=\"'product-partner_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n [options]=\"prorationBehaviors\"\n formControlName=\"proration_behavior\"\n [placeholder]=\"'Select Proration Behavior'\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n [options]=\"unsubscribeBehaviors\"\n formControlName=\"unsubscribe_stripe_behavior\"\n [placeholder]=\"'Select Unsubscribe Stripe Behavior'\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <!--start toggles -->\n <div class=\"col-12 row mt-4\">\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n [attr.aria-labelledby]=\"'product-active-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['multiple_allowed'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n [attr.aria-labelledby]=\"'product-visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n [attr.aria-labelledby]=\"'product-members_visible-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['members_visible'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['chat_visible'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['is_master_product'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n <!-- end toggles -->\n </div>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n transloco }} </button>\n <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n | transloco }} </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n</div>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n", styles: [".pw-label-style.info-circle{display:inline-block;line-height:1.5}.pw-label-style.info-circle:after{top:-7px}.nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"] }]
|
|
5054
|
+
args: [{ selector: 'pw-product-details', standalone: false, template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n aria-hidden=\"true\"></i></a>\n <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"my-4\" *ngIf=\"!isLoading\">\n <div class=\"mb-5\">\n <p-accordion>\n <p-accordion-panel value=\"0\">\n <p-accordion-header>How To</p-accordion-header>\n <p-accordion-content>\n <div class=\"row\">\n <div class=\"col-12 col-md-6\">\n <h4>Product / Feature logic</h4>\n <p> Logic for back-end/front-end permissions binding:\n <br /> * product.category (these are features) => type of product, i.e., seat_pricing or item_pricing\n <br /> * product.feature_key => this describes the main feature\n <br /> * product.permission_key => users can be subscribed to only one product of same permission_key\n <br /> * product.product_key => this is unique to each product, it defines the permission for frontend binding\n <br /> * Example of permission => {{ 'Pages.Product.{permission_key}.{product_key}' }}\n <br /> * If it's a feature associated to an existing project, you can to set the \"dependency product\" accordingly. </p>\n </div>\n <div class=\"col-12 col-md-6\">\n <h4>If it's a Free Product</h4>\n <p> Stripe Plan needs to be nil. <br /> \"Price\" per Unit needs to be set as 0. <br /> \"Trial Days\" needs\n to be something like 99999. <br /> The product should be set as \"visible===false\". </p>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </p-accordion>\n </div>\n <div class=\"row\" *ngIf=\"id\">\n <div class=\"col-md-6\">\n <div class=\"text-center mt-5\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n </h4>\n <img [src]=\"fullLogo\" alt=\"Demo Logo\" class=\"image full-logo w-100 h-100\"\n (error)=\"handleImageError($event, 'assets/img/icons/demo_logo1.png')\" />\n <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"text-center mt-5\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n </h4>\n <img [src]=\"squaredLogo\" alt=\"Company Logo\" width=\"70\" class=\"squared_logo\" height=\"70\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-md-6\">\n <div class=\"row\">\n <div class=\"col-md-6\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n [label]=\"'Label.Name' | transloco\" class=\"col-md-6 p-0\" name=\"name\" controlId=\"product-name\"\n [isLeftTooltip]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-name\" class=\"form-control\" formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-md-6\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n [label]=\"'Admin.Products.NickName' | transloco\" class=\"col-md-6 p-0\" name=\"nickname\" controlId=\"product-nickname\" [errorMsg]=\"\n 'Admin.Products.Validation.NickName' | transloco\n \">\n <input type=\"text\" id=\"product-nickname\" class=\"form-control\" formControlName=\"nickname\" [ngClass]=\"{\n 'is-invalid': submitted && f['nickname'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"row\">\n <div class=\"mb-3 col-12 col-md-6\">\n <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" class=\"col-md-6 p-0\" name=\"min_units\" controlId=\"product-min_units\"\n [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n <input type=\"number\" id=\"product-min_units\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['min_units'].errors\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-12 col-md-6\">\n <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" class=\"col-md-6 p-0\" name=\"max_units\" controlId=\"product-max_units\"\n [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n <input type=\"number\" id=\"product-max_units\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_units'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <span class=\"pw-label-style info-circle\" id=\"product-dependency_products-label\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n transloco }}</span>\n </span>\n <p-multiSelect [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n [attr.aria-labelledby]=\"'product-dependency_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n [label]=\"'Admin.Products.StripePlan' | transloco\" class=\"col-md-6 p-0\" name=\"stripe_plan_id\" controlId=\"product-stripe_plan_id\">\n <input type=\"text\" id=\"product-stripe_plan_id\" class=\"form-control\" formControlName=\"stripe_plan_id\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-price_per_unit\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\" [ngClass]=\"{\n 'is-invalid': submitted && f['price_per_unit'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n [label]=\"'Admin.Products.TrialDays' | transloco\" class=\"col-md-6 p-0\" name=\"trial_days\" controlId=\"product-trial_days\"\n [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n <input type=\"number\" id=\"product-trial_days\" min=\"0\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_days'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n [label]=\"'Admin.Products.MaxTrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits_trial\" controlId=\"product-max_hits_trial\">\n <input type=\"number\" id=\"product-max_hits_trial\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_hits_trial'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n [label]=\"'Admin.Products.TrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits\" controlId=\"product-max_hits\">\n <input type=\"number\" id=\"product-max_hits\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-12\" id=\"descriptionEditor\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-12\" id=\"signupInstructionsEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-12\" id=\"signupEmployeesEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n 'is-invalid':\n submitted && f['signup_instruction_employees'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" controlId=\"product-permission_key\" [errorMsg]=\"\n 'Admin.Products.Validation.PermissionKey' | transloco\n \">\n <input type=\"text\" id=\"product-permission_key\" class=\"form-control\" [ngClass]=\"{\n 'is-invalid': submitted && f['permission_key'].errors\n }\" formControlName=\"permission_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\" controlId=\"product-feature_key\"\n [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n <input type=\"text\" id=\"product-feature_key\" class=\"form-control\" [ngClass]=\"{\n 'is-invalid': submitted && f['feature_key'].errors\n }\" formControlName=\"feature_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\" class=\"col-md-6 p-0\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.Products.Tooltip.PermissionKey' | transloco\n \" name=\"product_key\" controlId=\"product-product_key\"\n [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n <input type=\"text\" id=\"product-product_key\" class=\"form-control\" formControlName=\"product_key\" [ngClass]=\"{\n 'is-invalid': submitted && f['product_key'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.Category' | transloco\" class=\"col-md-6 p-0\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.Products.Tooltip.PermissionKey' | transloco\n \" name=\"category\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n <p-select [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n [label]=\"'Admin.Products.BillingFrequency' | transloco\" class=\"col-md-6 p-0\" name=\"billing_frequency\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n <p-select [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n [required]=\"true\" [ngClass]=\"{\n 'is-invalid': submitted && f['billing_frequency'].errors\n }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.DocumentationUrl' | transloco\"\n [label]=\"'Admin.Products.DocumentationUrl' | transloco\" class=\"col-md-6 p-0\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\" [ngClass]=\"{\n 'is-invalid': submitted && f['documentation_url'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n [options]=\"allTos\"\n formControlName=\"product_privacy_service_id\"\n [placeholder]=\"'Select Privacy Service'\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n [options]=\"productsList\"\n formControlName=\"master_product_id\"\n [placeholder]=\"'Select Master Product'\"\n optionValue=\"value\"\n optionLabel=\"label\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"product-roles-label\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n transloco }}</span>\n </span>\n <p-multiSelect [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiSelect>\n </div>\n <div class=\"col-12 col-md-4\" *ngIf=\"supportedCurrency$ | async as currency\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-currency-label'\"\n [options]=\"currency['regions']\"\n formControlName=\"currency\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n [placeholder]=\"'Select Currency'\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\" *ngIf=\"supportedRegions$ | async as region\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-region-label'\"\n [options]=\"region['regions']\"\n formControlName=\"region\"\n [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n [placeholder]=\"'Select Region'\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\" controlId=\"product-gitlab_service_desk_email\">\n <input type=\"text\" id=\"product-gitlab_service_desk_email\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n <p-multiSelect [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n [attr.aria-labelledby]=\"'product-partner_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n [options]=\"prorationBehaviors\"\n formControlName=\"proration_behavior\"\n [placeholder]=\"'Select Proration Behavior'\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n [options]=\"unsubscribeBehaviors\"\n formControlName=\"unsubscribe_stripe_behavior\"\n [placeholder]=\"'Select Unsubscribe Stripe Behavior'\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <!--start toggles -->\n <div class=\"col-12 row mt-4\">\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n [attr.aria-labelledby]=\"'product-active-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['multiple_allowed'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n [attr.aria-labelledby]=\"'product-visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n [attr.aria-labelledby]=\"'product-members_visible-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['members_visible'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['chat_visible'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['is_master_product'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n <!-- end toggles -->\n </div>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n transloco }} </button>\n <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n | transloco }} </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n</div>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n", styles: [".pw-label-style.info-circle{display:inline-block;line-height:1.5}.pw-label-style.info-circle:after{top:-7px}.nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"] }]
|
|
5051
5055
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.ProductService }, { type: i2$1.NgbModal }, { type: i1.AdminService }], propDecorators: { onSave: [] } });
|
|
5052
5056
|
|
|
5053
5057
|
class ProductInsightComponent extends AppBaseComponent {
|
|
@@ -6760,7 +6764,9 @@ class SubscriptionProductDetailsComponent extends AppBaseComponent {
|
|
|
6760
6764
|
this.form.get('expires_at').disable();
|
|
6761
6765
|
this.disableExpiresAt = true;
|
|
6762
6766
|
}
|
|
6763
|
-
const externalPayment = this.permissionService.isSuperAdmin()
|
|
6767
|
+
const externalPayment = this.permissionService.isSuperAdmin() ||
|
|
6768
|
+
this.permissionService.isUserSubscriptionSuperAdmin() ||
|
|
6769
|
+
!response?.stripe_subscription_id;
|
|
6764
6770
|
if (externalPayment) {
|
|
6765
6771
|
this.form.get('external_payment').enable();
|
|
6766
6772
|
}
|