@posiwise/resource-contact-us 0.0.14 → 0.0.16

package/fesm2022/posiwise-resource-contact-us.mjs

@@ -1,9 +1,7 @@
-import * as i6$1 from '@angular/cdk/drag-drop';
+import * as i5$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i7 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, ViewChild, Inject, ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { DOCUMENT, Input, ViewChild, Inject, ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i4 from '@angular/platform-browser';
@@ -20,6 +18,8 @@ import { StatusCodes } from 'http-status-codes';
 import Swal from 'sweetalert2';
 import * as i6 from '@ng-bootstrap/ng-bootstrap';
 import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i7 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i9 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i10 from 'ngx-captcha';
@@ -163,24 +163,33 @@ class Trial4ContactUsComponent extends AppBaseComponent {
                 this.modalService.dismissAll();
             }
             this.toast.success(event.file ? 'Logo updated' : 'Logo removed');
+            this.cdr.markForCheck();
         });
     }
     saveQuestions(modal) {
+        const normalizedQuestions = (this.editingQuestions ?? []).map(question => ({
+            question: question?.question ?? '',
+            options: (question?.options ?? [])
+                .filter(option => option?.option?.trim())
+                .map(option => ({ option: option.option }))
+        }));
         const updateData = {
             contact_us: {
-                ...this.appConfig.pages_config?.contact_us,
-                questions: this.editingQuestions
+                description: this.appConfig?.pages_config?.contact_us?.description ?? '',
+                url: this.appConfig?.pages_config?.contact_us?.url ?? '',
+                hubspot: this.appConfig?.pages_config?.contact_us?.hubspot ?? [],
+                questions: normalizedQuestions
             },
             subscription_id: this.id
         };
         this.adminService.updateDomainConfig(this.domainId, updateData).subscribe(() => {
-            this.questions = this.editingQuestions;
+            this.questions = normalizedQuestions;
             this.toast.success('Questions updated');
-            this.question = this.editingQuestions?.[0]?.question;
-            if (this.editingQuestions?.[0]?.options?.length > 0) {
+            this.question = normalizedQuestions?.[0]?.question;
+            if (normalizedQuestions?.[0]?.options?.length > 0) {
                 this.psaOptions = [
                     { label: 'Select PSA', value: '' },
-                    ...(this.questions?.[0]?.options ?? [])
+                    ...(normalizedQuestions?.[0]?.options ?? [])
                         .filter(q => q.option?.trim())
                         .map(q => ({
                         label: q.option,
@@ -192,6 +201,7 @@ class Trial4ContactUsComponent extends AppBaseComponent {
                 this.psaOptions = [];
             }
             modal.close();
+            this.cdr.markForCheck();
         });
     }
     addNewQuestion() {
@@ -228,6 +238,7 @@ class Trial4ContactUsComponent extends AppBaseComponent {
             this.companyName = this.editingCompanyName;
             this.toast.success('Social links and company name updated');
             modal.close();
+            this.cdr.markForCheck();
         });
     }
     hasValidOptions() {
@@ -323,6 +334,7 @@ class Trial4ContactUsComponent extends AppBaseComponent {
                     centered: true,
                     windowClass: 'modal-holder'
                 });
+                this.cdr.markForCheck();
             });
         }
     }
@@ -378,6 +390,7 @@ class Trial4ContactUsComponent extends AppBaseComponent {
                                         centered: true,
                                         windowClass: 'modal-holder'
                                     });
+                                    this.cdr.markForCheck();
                                 });
                             }
                             else {
@@ -386,8 +399,10 @@ class Trial4ContactUsComponent extends AppBaseComponent {
                         }
                         this.form.reset();
                         this.isCaptchaVerified = false;
+                        this.cdr.markForCheck();
                     });
                 }
+                this.cdr.markForCheck();
             });
         }
     }
@@ -451,6 +466,7 @@ class Trial4ContactUsComponent extends AppBaseComponent {
             this.footerLinks = [...this.editingFooterLinks.items];
             this.footerLinksData = { ...this.editingFooterLinks };
             modal.close();
+            this.cdr.markForCheck();
         });
     }
     saveEmail() {
@@ -463,6 +479,7 @@ class Trial4ContactUsComponent extends AppBaseComponent {
             .subscribe(() => {
             this.toast.success('Email updated');
             this.isEditingEmail = false;
+            this.cdr.markForCheck();
         });
     }
     saveStreet() {
@@ -475,6 +492,7 @@ class Trial4ContactUsComponent extends AppBaseComponent {
             this.toast.success('Street updated');
             this.street = this.editingStreet;
             this.isEditingStreet = false;
+            this.cdr.markForCheck();
         });
     }
     cancelStreet() {
@@ -507,6 +525,7 @@ class Trial4ContactUsComponent extends AppBaseComponent {
             this.hubspotHtml = this.sanitizer.bypassSecurityTrustHtml(this.editingHubspotHtml); // NOSONAR
             this.toast.success('Hubspot Embed updated');
             modal.close();
+            this.cdr.markForCheck();
         });
     }
     updateCanEditResourcesValue() {
@@ -515,12 +534,12 @@ class Trial4ContactUsComponent extends AppBaseComponent {
     canEditResources() {
         return this.canEditResourcesValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: Trial4ContactUsComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i2.AuthService }, { token: i3.CrmService }, { token: i4.DomSanitizer }, { token: i5.AdminService }, { token: i0.Injector }, { token: i2.AbTestService }, { token: i6.NgbModal }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: Trial4ContactUsComponent, isStandalone: false, selector: "pw-trial-4-contact-us", inputs: { subscriptionId: "subscriptionId", sourceId: "sourceId", masterSubscriptionId: "masterSubscriptionId", experimentName: "experimentName", microserviceName: "microserviceName", shardName: "shardName", user: "user", userLoggedIn: "userLoggedIn" }, viewQueries: [{ propertyName: "footerSection", first: true, predicate: ["footerSection"], descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["bookMeeting"], descendants: true, static: true }, { propertyName: "editFooterLinksModal", first: true, predicate: ["editFooterLinksModal"], descendants: true }, { propertyName: "logoModal", first: true, predicate: ["logoModal"], descendants: true }, { propertyName: "logoUploader", first: true, predicate: ["logoUploader"], descendants: true }, { propertyName: "hubspotEditModal", first: true, predicate: ["hubspotEditModal"], descendants: true }, { propertyName: "socialEditModal", first: true, predicate: ["socialEditModal"], descendants: true }, { propertyName: "questionsEditModal", first: true, predicate: ["questionsEditModal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section  #footerSection class=\"bg-black text-white py-5 footer-section\">\n  <div class=\"container\">\n    <div class=\"row\">\n\n      <!-- LEFT COLUMN -->\n      <div class=\"col-md-6 mb-4 d-flex flex-column justify-content-between\" [ngClass]=\"{ 'site-column': getFooterHubspotForm() }\">\n        <div>\n          <h3 class=\"mb-4 d-flex align-items-center\">\n            <span class=\"me-2 text-white\">Site Map:</span>\n            <i *ngIf=\"canEditResourcesValue\" class=\"fa fa-edit in-page-edit-icon cursor-pointer text-white ms-3\" (click)=\"openEditFooterLinksModal(editFooterLinksModal)\" (keydown.enter)=\"openEditFooterLinksModal(editFooterLinksModal)\" (keydown.space)=\"openEditFooterLinksModal(editFooterLinksModal)\" ngbTooltip=\"Edit Footer Links\"></i>\n          </h3>\n          <ul class=\"mt-4\">\n            <li routerLink=\"/\"\n            class=\"cursor-pointer user-info-label link-label\"> Home </li>\n            <li *ngFor=\"let link of footerLinks\" [routerLink]=\"link?.path\"\n              class=\"cursor-pointer user-info-label link-label mt-4\"><span  *ngIf=\"link?.title\">{{link?.title}}</span> </li>\n            <li routerLink=\"/login\"\n              class=\"cursor-pointer user-info-label mt-4 link-label\"> Log in </li>\n            <li [routerLink]=\"'/privacy-and-tos/' + tosId\"\n              class=\"cursor-pointer user-info-label mt-4 link-label\"> Privacy statement </li>\n          </ul>\n          <p class=\"address-section email-section mb-4\">\n            <span class=\"user-info-label\">Email: </span>\n            <ng-container *ngIf=\"!isEditingEmail; else editEmail\">\n              <span class=\"user-info\">{{ email }}</span>\n              <i *ngIf=\"canEditResourcesValue\" class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\" (click)=\"isEditingEmail = true\" (keydown.enter)=\"isEditingEmail = true\" (keydown.space)=\"isEditingEmail = true\"></i>\n            </ng-container>\n\n            <ng-template #editEmail>\n              <input\n                class=\"form-control d-inline w-auto\"\n                [(ngModel)]=\"editingEmail\"\n              id=\"input_editingEmail_7936\" name=\"input_editingEmail_7936\" />\n              <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveEmail()\">Save</button>\n              <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"isEditingEmail = false\">Cancel</button>\n            </ng-template>\n          </p>\n                    <span class=\"email-section mt-3 address-text\">\n            <span class=\"user-info-label\">\n              Address:\n              <i *ngIf=\"canEditResourcesValue\"\n                 class=\"fa fa-edit in-page-edit-icon cursor-pointer ms-2 text-white\"\n                 title=\"Edit Address\"\n                 (click)=\"isEditingStreet = true\"\n                 (keydown.enter)=\"isEditingStreet = true\"\n                 (keydown.space)=\"isEditingStreet = true\"></i>\n            </span><br/>\n\n            <ng-container *ngIf=\"!isEditingStreet; else editStreetBlock\">\n              <span class=\"address-text user-info\">{{ street }}</span>\n            </ng-container>\n\n            <ng-template #editStreetBlock>\n              <div class=\"d-flex align-items-center mt-3\">\n                <input class=\"form-control form-control-sm\" [(ngModel)]=\"editingStreet\" id=\"input_editingStreet_4768\" name=\"input_editingStreet_4768\" />\n                <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveStreet()\">Save</button>\n                <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"cancelStreet()\">Cancel</button>\n              </div>\n            </ng-template>\n\n          </span>\n\n        </div>\n        <div class=\"d-flex\">\n          <img [src]=\"logo\"\n               alt=\"Company logo\"\n               class=\"img-fluid mt-4 logo-image cursor-pointer\"\n               width=\"160\"\n               height=\"35\"\n               (click)=\"scrollToTop()\"\n               (keydown.enter)=\"scrollToTop()\"\n               (keydown.space)=\"scrollToTop()\"\n               title=\"Click to go to top of page\" />\n          <i *ngIf=\"canEditResourcesValue\"\n             class=\"fa fa-edit in-page-edit-icon fa-sm ms-3 cursor-pointer text-white align-self-center mt-3\"\n             (click)=\"openLogoEditModal()\"\n             (keydown.enter)=\"openLogoEditModal()\"\n             (keydown.space)=\"openLogoEditModal()\"\n             title=\"Edit Logo\"></i>\n        </div>\n      </div>\n\n      <!-- RIGHT COLUMN -->\n      <div class=\"col-md-6\">\n        <ng-container *ngIf=\"getFooterHubspotForm() as footerItem; else defaultForm\">\n            <div class=\"d-flex\">\n              <div\n                class=\"hubspot-container w-100 content-loaded\"\n                [innerHTML]=\"hubspotHtml\"\n                (load)=\"onHubspotLoad($event)\">\n              </div>\n              <i *ngIf=\"canEditResourcesValue\"\n              class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer\"\n              (click)=\"openHubspotEditModal(footerItem)\"\n              (keydown.enter)=\"openHubspotEditModal(footerItem)\"\n              (keydown.space)=\"openHubspotEditModal(footerItem)\"\n              title=\"Edit Hubspot Embed\"></i>\n            </div>\n          </ng-container>\n\n          <ng-template #defaultForm>\n          <div class=\"d-flex\">\n                <h3 class=\"text-white mb-4\"> <span class=\"text-white\">Get in touch:</span></h3>\n                <i *ngIf=\"canEditResourcesValue\"\n                class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3 mt-2\"\n                (click)=\"openQuestionsEditModal()\"\n                (keydown.enter)=\"openQuestionsEditModal()\"\n                (keydown.space)=\"openQuestionsEditModal()\"\n                title=\"Edit Questions\"></i>\n            </div>\n            <div class=\"contact-form\">\n              <form [formGroup]=\"form\">\n                <div class=\"mb-3\">\n                  <div class=\"email\">\n                    <div class=\"form-field\">\n                      <label for=\"email\">Email:</label>\n                      <div class=\"w-100\">\n                        <input type=\"text\"\n                          class=\"mb-1\"\n                          id=\"email\"\n                          formControlName=\"email\" name=\"input_email_3\"/>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('email').valid && (form.get('email').touched || submitted)\n                          \"\n                      errorMsg=\"Email is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"first_name\">First name:</label>\n                      <div class=\"w-100\">\n                        <input input type=\"text\"\n                        id=\"first_name\"\n                        formControlName=\"first_name\" name=\"input_first_name_4\"/>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('first_name').valid && (form.get('first_name').touched || submitted)\n                          \"\n                      errorMsg=\"First name is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"last_name\">Last name:</label>\n                      <input type=\"text\"\n                        id=\"last_name\"\n                        formControlName=\"last_name\" name=\"input_last_name_5\"/>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"company\">Company:</label>\n                      <input type=\"text\"\n                        id=\"company\"\n                        formControlName=\"company\" name=\"input_company_6\"/>\n                    </div>\n                    <div class=\"form-field\" *ngIf=\"hasValidOptions()\">\n                      <label id=\"resource-contact-psa-label\" class=\"select-label\">{{question}}</label>\n                      <p-select\n                        [attr.aria-labelledby]=\"'resource-contact-psa-label'\"\n                        formControlName=\"psa\"\n                        [options]=\"psaOptions\"\n                        [placeholder]=\"'Select PSA'\"\n                        styleClass=\"input-select\">\n                      </p-select>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"enquiry\" class=\"select-label\">How can we help you?</label>\n                      <div class=\"enquiry-field\">\n                        <textarea  id=\"enquiry\" formControlName=\"enquiry\" class=\"\">\n                                      </textarea>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('enquiry').valid && (form.get('enquiry').touched || submitted)\n                          \"\n                      errorMsg=\"Enquiry is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-end\">\n                  <div class=\"captcha-wrapper-container\"\n                  *ngIf=\"isCaptchaVerified\">\n                  <ngx-recaptcha2 [ngModelOptions]=\"{ standalone: true }\"\n                    [siteKey]=\"captchaKeyV2\"\n                    size=\"normal\"\n                    [(ngModel)]=\"recaptcha\"\n                    (success)=\"handleSuccess($event)\">\n                  </ngx-recaptcha2>\n                </div>\n                  <button type=\"submit\"\n                    (click)=\"onSubmit()\"\n                    *ngIf=\"!isCaptchaVerified\"\n                    class=\"sign-btn sign-header-btn mt-3\">\n                    {{ 'Button.Submit' | transloco }}\n                  </button>\n                </div>\n\n                <div class=\"d-flex align-items-center mt-4\">\n                  <div class=\"icons d-flex align-items-center\">\n                    <a [eventTracker]=\"{\n                        category: 'youtube',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                      [href]=\"youtubeUrl\"\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\">\n                      <img src=\"/assets/img/icons/youtube.png\"\n                        class=\"img-fluid youtube-icon\"\n                        width=\"54\"\n                        height=\"54\"\n                        alt=\"\" />\n                    </a>\n                    <a [eventTracker]=\"{\n                        category: 'linkedin',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                      [href]=\"linkedInUrl\"\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      class=\"ms-3\">\n                      <img src=\"/assets/img/icons/social/linkedin.svg\"\n                        class=\"img-fluid linkedin-icon\"\n                        width=\"48\"\n                        height=\"48\"\n                        alt=\"\" />\n                    </a>\n                    <i *ngIf=\"canEditResourcesValue\"\n                    class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\"\n                    (click)=\"openSocialEditModal()\"\n                    (keydown.enter)=\"openSocialEditModal()\"\n                    (keydown.space)=\"openSocialEditModal()\"\n                    title=\"Edit Social Links & Company Name\"></i>\n                  </div>\n                  <div class=\"copyright text-white\">\n                    2025 {{companyName}}.\n                  </div>\n                </div>\n              </form>\n            </div>\n          </ng-template>\n        </div>\n    </div>\n  </div>\n</section>\n\n\n\n<ng-template #bookMeeting\n  let-modal>\n  <div class=\"modal-header\">\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h3 class=\"text-center modal-basic-title\">\n      Thanks for getting in touch! Our team will be in contact shortly, or we\n      can compare calendars now &amp; schedule a time\n    </h3>\n    <button type=\"button\"\n      [eventTracker]=\"{\n        category: 'request-demo',\n        action: 'click',\n        label: 'cloudolive-landing-page-b',\n        value: 1\n      }\"\n      (click)=\"navigateToBookMeeting()\"\n      class=\"sign-btn sign-header-btn mx-auto d-block mb-3\">\n      Let's do it\n    </button>\n  </div>\n</ng-template>\n\n\n<ng-template #editFooterLinksModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Footer Links</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Footer Links Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropFooterLinks($event)\">\n      <div *ngFor=\"let footer of editingFooterLinks.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"footerTitle{{i}}\" class=\"form-label\">Title</label>\n            <input id=\"footerTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"footer.title\" name=\"input_footer.title_7\"/>\n          </div>\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"footerPath{{i}}\" class=\"form-label\">Path</label>\n            <input id=\"footerPath{{i}}\" class=\"form-control\" [(ngModel)]=\"footer.path\" name=\"input_footer.path_8\"/>\n          </div>\n          <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n            <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeFooterLink(i)\" (keydown.enter)=\"removeFooterLink(i)\" (keydown.space)=\"removeFooterLink(i)\"></i>\n            <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n          </div>\n        </div>\n\n        <!-- Subtitles -->\n        <div cdkDropList (cdkDropListDropped)=\"dropSubtitles(i, $event)\">\n          <div *ngFor=\"let sub of footer.subtitles; let j = index\" class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n            <div class=\"col-md-5\">\n              <label for=\"subtitleTitle{{i}}{{j}}\" class=\"form-label\">Subtitle Title</label>\n              <input id=\"subtitleTitle{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.title\" name=\"input_sub.title_9\"/>\n            </div>\n            <div class=\"col-md-5\">\n              <label for=\"subtitlePath{{i}}{{j}}\" class=\"form-label\">Subtitle Path</label>\n              <input id=\"subtitlePath{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.path\" name=\"input_sub.path_10\"/>\n            </div>\n            <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n              <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeSubtitle(i, j)\" (keydown.enter)=\"removeSubtitle(i, j)\" (keydown.space)=\"removeSubtitle(i, j)\"></i>\n              <i class=\"fa fa-bars cursor-move in-page-bars-icon\" cdkDragHandle></i>\n            </div>\n          </div>\n        </div>\n\n        <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addSubtitle(i)\">\n          + Add Subtitle\n        </button>\n      </div>\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addFooterLink()\">\n      + Add Footer Link\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveFooterLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n\n\n<ng-template #logoModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <pw-custom-uploader\n      [aspectRatio]=\"'fullLogo'\"\n      [title]=\"'Main Contrast Logo'\"\n      [controlName]=\"'logo_main_contrast'\"\n      [previewData]=\"previewData\"\n      (saveEvent)=\"onSaveFile($event)\">\n    </pw-custom-uploader>\n  </div>\n</ng-template>\n\n\n\n<ng-template #hubspotEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Hubspot Embed</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"hubspotId\" class=\"form-label\">Hubspot ID</label>\n      <input id=\"hubspotId\" [(ngModel)]=\"editingHubspotId\" class=\"form-control\" name=\"input_editingHubspotId_11\"/>\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"hubspotEmbedDiv\" class=\"form-label\">Embed DIV</label>\n      <textarea id=\"hubspotEmbedDiv\" [(ngModel)]=\"editingHubspotHtml\" rows=\"8\" class=\"form-control\"></textarea>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveHubspotHtml(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n<ng-template #socialEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Social Links & Company Name</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"youtubeUrl\" class=\"form-label\">YouTube URL</label>\n      <input id=\"youtubeUrl\" [(ngModel)]=\"editingYoutubeUrl\" class=\"form-control\" name=\"input_editingYoutubeUrl_12\"/>\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"linkedinUrl\" class=\"form-label\">LinkedIn URL</label>\n      <input id=\"linkedinUrl\" [(ngModel)]=\"editingLinkedInUrl\" class=\"form-control\" name=\"input_editingLinkedInUrl_13\"/>\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"companyName\" class=\"form-label\">Company Name</label>\n      <input id=\"companyName\" [(ngModel)]=\"editingCompanyName\" class=\"form-control\" name=\"input_editingCompanyName_14\"/>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveSocialLinks(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n\n<ng-template #questionsEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Questions</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Questions Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropQuestions($event)\">\n      <div *ngFor=\"let q of editingQuestions; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-11 mb-2\">\n            <label for=\"questionText{{i}}\" class=\"form-label\">Question</label>\n            <input id=\"questionText{{i}}\" class=\"form-control\" [(ngModel)]=\"q.question\" placeholder=\"Enter question\" name=\"input_q.question_15\"/>\n          </div>\n          <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-4\">\n            <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n          </div>\n        </div>\n\n        <!-- Options Section -->\n        <div cdkDropList (cdkDropListDropped)=\"dropQuestionOptions(i, $event)\">\n          <div *ngFor=\"let opt of q.options; let j = index\" class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n            <div class=\"col-md-7 mb-2\">\n              <label for=\"questionOption{{i}}{{j}}\" class=\"form-label\">Option</label>\n              <input id=\"questionOption{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"opt.option\" placeholder=\"Enter option\" name=\"input_opt.option_16\"/>\n            </div>\n            <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n              <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeQuestionOption(i, j)\" (keydown.enter)=\"removeQuestionOption(i, j)\" (keydown.enter)=\"removeQuestionOption(i, j)\"></i>\n              <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n            </div>\n          </div>\n        </div>\n\n        <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addQuestionOption(i)\">+ Add Option</button>\n      </div>\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addNewQuestion()\">+ Add Question</button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveQuestions(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n", styles: [".product-explainer-section{background-color:#000}.footer-section{min-height:500px}@media (min-width: 768px){.footer-section{min-height:600px}}.footer-section .container{transition:opacity .3s ease,visibility .3s ease}.footer-section input.form-control,.footer-section select.form-control,.footer-section textarea.form-control{background-color:#fff;border:none;color:#000;font-size:14px}.btn-primary{background-color:#007bff;border:none}.site-column{margin-top:2.9rem}.email-section{color:#fff;font-size:2rem}.address-section{margin-top:5rem}.address-text{line-height:2.2rem}.user-info{font-size:1.5rem}.user-info-label{font-size:1.7rem;font-weight:700}.contact-form form .form-field{display:flex;align-items:center;margin-bottom:1.2rem}.contact-form form .form-field label{width:130px;min-width:130px;margin:0;font-size:14px;color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:1px}.contact-form form .form-field p-dropdown{width:100%}.contact-form form .form-field input,.contact-form form .form-field select,.contact-form form .form-field textarea,.contact-form form .form-field ::ng-deep p-dropdown .p-inputwrapper{flex:1;border:none;border-radius:30px;padding:12px 20px;font-size:14px;width:100%!important;max-width:100%;color:#000}.contact-form form .form-field textarea{resize:vertical}.contact-form form .submit-button{background-color:#3b82f6;border:none;border-radius:30px;font-size:16px;font-weight:500;padding:10px 24px;margin-top:1.2rem}.input-select{height:43px}.select-label{width:210px!important}.copyright{margin-top:2rem;margin-left:4rem;font-size:19px;font-weight:700}.d-flex img{margin-right:0!important}.youtube-icon{height:38px}.enquiry-field{margin-left:.5rem;width:63%}::ng-deep .text-danger{margin-top:.25rem!important;margin-left:.5rem!important}.hubspot-container{min-height:400px;transition:opacity .3s ease}.hubspot-container:not(.content-loaded){opacity:0;pointer-events:none}.hubspot-container.content-loaded{opacity:1}@media (min-width: 768px){.hubspot-container{margin-top:-3rem}}@media (min-width: 768px) and (max-width: 1200px){.container{padding:0rem 6rem!important}}.link-label{cursor:pointer;transition:color .3s}.link-label:hover{color:var(--first)}.icons img{transition:transform .3s ease,filter .3s ease;cursor:pointer}.icons img:hover{transform:scale(1.1);filter:brightness(1.2)}.logo-image{max-width:160px;width:160px;height:35px;object-fit:contain;aspect-ratio:160/35}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: ["errorMsg", "displayError"] }, { kind: "component", type: i9.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: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.ReCaptcha2Component, selector: "ngx-recaptcha2", inputs: ["theme", "size"] }, { kind: "directive", type: i11.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i12.EventTrackerDirective, selector: "[eventTracker]", inputs: ["eventTracker"] }, { kind: "directive", type: i12.LazyImgDirective, selector: "img" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: Trial4ContactUsComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i2.AuthService }, { token: i3.CrmService }, { token: i4.DomSanitizer }, { token: i5.AdminService }, { token: i0.Injector }, { token: i2.AbTestService }, { token: i6.NgbModal }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: Trial4ContactUsComponent, isStandalone: false, selector: "pw-trial-4-contact-us", inputs: { subscriptionId: "subscriptionId", sourceId: "sourceId", masterSubscriptionId: "masterSubscriptionId", experimentName: "experimentName", microserviceName: "microserviceName", shardName: "shardName", user: "user", userLoggedIn: "userLoggedIn" }, viewQueries: [{ propertyName: "footerSection", first: true, predicate: ["footerSection"], descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["bookMeeting"], descendants: true, static: true }, { propertyName: "editFooterLinksModal", first: true, predicate: ["editFooterLinksModal"], descendants: true }, { propertyName: "logoModal", first: true, predicate: ["logoModal"], descendants: true }, { propertyName: "logoUploader", first: true, predicate: ["logoUploader"], descendants: true }, { propertyName: "hubspotEditModal", first: true, predicate: ["hubspotEditModal"], descendants: true }, { propertyName: "socialEditModal", first: true, predicate: ["socialEditModal"], descendants: true }, { propertyName: "questionsEditModal", first: true, predicate: ["questionsEditModal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section  #footerSection class=\"bg-black text-white py-5 footer-section\">\n  <div class=\"container\">\n    <div class=\"row\">\n\n      <!-- LEFT COLUMN -->\n      <div class=\"col-md-6 mb-4 d-flex flex-column justify-content-between\" [ngClass]=\"{ 'site-column': getFooterHubspotForm() }\">\n        <div>\n          <h3 class=\"mb-4 d-flex align-items-center\">\n            <span class=\"me-2 text-white\">Site Map:</span>\n            @if (canEditResourcesValue) {\n              <i class=\"fa fa-edit in-page-edit-icon cursor-pointer text-white ms-3\" (click)=\"openEditFooterLinksModal(editFooterLinksModal)\" (keydown.enter)=\"openEditFooterLinksModal(editFooterLinksModal)\" (keydown.space)=\"openEditFooterLinksModal(editFooterLinksModal)\" ngbTooltip=\"Edit Footer Links\"></i>\n            }\n          </h3>\n          <ul class=\"mt-4\">\n            <li routerLink=\"/\"\n            class=\"cursor-pointer user-info-label link-label\"> Home </li>\n            @for (link of footerLinks; track link) {\n              <li [routerLink]=\"link?.path\"\n                class=\"cursor-pointer user-info-label link-label mt-4\">@if (link?.title) {\n                <span >{{link?.title}}</span>\n              } </li>\n            }\n            <li routerLink=\"/login\"\n            class=\"cursor-pointer user-info-label mt-4 link-label\"> Log in </li>\n            <li [routerLink]=\"'/privacy-and-tos/' + tosId\"\n            class=\"cursor-pointer user-info-label mt-4 link-label\"> Privacy statement </li>\n          </ul>\n          <p class=\"address-section email-section mb-4\">\n            <span class=\"user-info-label\">Email: </span>\n            @if (!isEditingEmail) {\n              <span class=\"user-info\">{{ email }}</span>\n              @if (canEditResourcesValue) {\n                <i class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\" (click)=\"isEditingEmail = true\" (keydown.enter)=\"isEditingEmail = true\" (keydown.space)=\"isEditingEmail = true\"></i>\n              }\n            } @else {\n              <input\n                class=\"form-control d-inline w-auto\"\n                [(ngModel)]=\"editingEmail\"\n                id=\"input_editingEmail_7936\" name=\"input_editingEmail_7936\" />\n              <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveEmail()\">Save</button>\n              <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"isEditingEmail = false\">Cancel</button>\n            }\n\n          </p>\n          <span class=\"email-section mt-3 address-text\">\n            <span class=\"user-info-label\">\n              Address:\n              @if (canEditResourcesValue) {\n                <i\n                  class=\"fa fa-edit in-page-edit-icon cursor-pointer ms-2 text-white\"\n                  title=\"Edit Address\"\n                  (click)=\"isEditingStreet = true\"\n                  (keydown.enter)=\"isEditingStreet = true\"\n                (keydown.space)=\"isEditingStreet = true\"></i>\n              }\n            </span><br/>\n\n            @if (!isEditingStreet) {\n              <span class=\"address-text user-info\">{{ street }}</span>\n            } @else {\n              <div class=\"d-flex align-items-center mt-3\">\n                <input class=\"form-control form-control-sm\" [(ngModel)]=\"editingStreet\" id=\"input_editingStreet_4768\" name=\"input_editingStreet_4768\" />\n                <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveStreet()\">Save</button>\n                <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"cancelStreet()\">Cancel</button>\n              </div>\n            }\n\n\n          </span>\n\n        </div>\n        <div class=\"d-flex\">\n          <img [src]=\"logo\"\n            alt=\"Company logo\"\n            class=\"img-fluid mt-4 logo-image cursor-pointer\"\n            width=\"160\"\n            height=\"35\"\n            (click)=\"scrollToTop()\"\n            (keydown.enter)=\"scrollToTop()\"\n            (keydown.space)=\"scrollToTop()\"\n            title=\"Click to go to top of page\" />\n          @if (canEditResourcesValue) {\n            <i\n              class=\"fa fa-edit in-page-edit-icon fa-sm ms-3 cursor-pointer text-white align-self-center mt-3\"\n              (click)=\"openLogoEditModal()\"\n              (keydown.enter)=\"openLogoEditModal()\"\n              (keydown.space)=\"openLogoEditModal()\"\n            title=\"Edit Logo\"></i>\n          }\n        </div>\n      </div>\n\n      <!-- RIGHT COLUMN -->\n      <div class=\"col-md-6\">\n        @if (getFooterHubspotForm(); as footerItem) {\n          <div class=\"d-flex\">\n            <div\n              class=\"hubspot-container w-100 content-loaded\"\n              [innerHTML]=\"hubspotHtml\"\n              (load)=\"onHubspotLoad($event)\">\n            </div>\n            @if (canEditResourcesValue) {\n              <i\n                class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer\"\n                (click)=\"openHubspotEditModal(footerItem)\"\n                (keydown.enter)=\"openHubspotEditModal(footerItem)\"\n                (keydown.space)=\"openHubspotEditModal(footerItem)\"\n              title=\"Edit Hubspot Embed\"></i>\n            }\n          </div>\n        } @else {\n          <div class=\"d-flex\">\n            <h3 class=\"text-white mb-4\"> <span class=\"text-white\">Get in touch:</span></h3>\n            @if (canEditResourcesValue) {\n              <i\n                class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3 mt-2\"\n                (click)=\"openQuestionsEditModal()\"\n                (keydown.enter)=\"openQuestionsEditModal()\"\n                (keydown.space)=\"openQuestionsEditModal()\"\n              title=\"Edit Questions\"></i>\n            }\n          </div>\n          <div class=\"contact-form\">\n            <form [formGroup]=\"form\">\n              <div class=\"mb-3\">\n                <div class=\"email\">\n                  <div class=\"form-field\">\n                    <label for=\"email\">Email:</label>\n                    <div class=\"w-100\">\n                      <input type=\"text\"\n                        class=\"mb-1\"\n                        id=\"email\"\n                        formControlName=\"email\" name=\"input_email_3\"/>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('email').valid && (form.get('email').touched || submitted)\n                          \"\n                        errorMsg=\"Email is required\">\n                      </pw-field-error-display>\n                    </div>\n                  </div>\n                  <div class=\"form-field\">\n                    <label for=\"first_name\">First name:</label>\n                    <div class=\"w-100\">\n                      <input input type=\"text\"\n                        id=\"first_name\"\n                        formControlName=\"first_name\" name=\"input_first_name_4\"/>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('first_name').valid && (form.get('first_name').touched || submitted)\n                          \"\n                        errorMsg=\"First name is required\">\n                      </pw-field-error-display>\n                    </div>\n                  </div>\n                  <div class=\"form-field\">\n                    <label for=\"last_name\">Last name:</label>\n                    <input type=\"text\"\n                      id=\"last_name\"\n                      formControlName=\"last_name\" name=\"input_last_name_5\"/>\n                  </div>\n                  <div class=\"form-field\">\n                    <label for=\"company\">Company:</label>\n                    <input type=\"text\"\n                      id=\"company\"\n                      formControlName=\"company\" name=\"input_company_6\"/>\n                  </div>\n                  @if (hasValidOptions()) {\n                    <div class=\"form-field\">\n                      <span id=\"resource-contact-psa-label\" class=\"select-label pw-label-style\">{{question}}</span>\n                      <p-select\n                        [attr.aria-labelledby]=\"'resource-contact-psa-label'\"\n                        formControlName=\"psa\"\n                        [options]=\"psaOptions\"\n                        [placeholder]=\"'Select PSA'\"\n                        styleClass=\"input-select\">\n                      </p-select>\n                    </div>\n                  }\n                  <div class=\"form-field\">\n                    <label for=\"enquiry\" class=\"select-label\">How can we help you?</label>\n                    <div class=\"enquiry-field\">\n                      <textarea  id=\"enquiry\" formControlName=\"enquiry\" class=\"\">\n                      </textarea>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('enquiry').valid && (form.get('enquiry').touched || submitted)\n                          \"\n                        errorMsg=\"Enquiry is required\">\n                      </pw-field-error-display>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-end\">\n                @if (isCaptchaVerified) {\n                  <div class=\"captcha-wrapper-container\"\n                    >\n                    <ngx-recaptcha2 [ngModelOptions]=\"{ standalone: true }\"\n                      [siteKey]=\"captchaKeyV2\"\n                      size=\"normal\"\n                      [(ngModel)]=\"recaptcha\"\n                      (success)=\"handleSuccess($event)\">\n                    </ngx-recaptcha2>\n                  </div>\n                }\n                @if (!isCaptchaVerified) {\n                  <button type=\"submit\"\n                    (click)=\"onSubmit()\"\n                    class=\"sign-btn sign-header-btn mt-3\">\n                    {{ 'Button.Submit' | transloco }}\n                  </button>\n                }\n              </div>\n              <div class=\"d-flex align-items-center mt-4\">\n                <div class=\"icons d-flex align-items-center\">\n                    <a [eventTracker]=\"{\n                        category: 'youtube',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                    [href]=\"youtubeUrl\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\">\n                    <img src=\"/assets/img/icons/youtube.png\"\n                      class=\"img-fluid youtube-icon\"\n                      width=\"54\"\n                      height=\"54\"\n                      alt=\"\" />\n                  </a>\n                    <a [eventTracker]=\"{\n                        category: 'linkedin',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                    [href]=\"linkedInUrl\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    class=\"ms-3\">\n                    <img src=\"/assets/img/icons/social/linkedin.svg\"\n                      class=\"img-fluid linkedin-icon\"\n                      width=\"48\"\n                      height=\"48\"\n                      alt=\"\" />\n                  </a>\n                  @if (canEditResourcesValue) {\n                    <i\n                      class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\"\n                      (click)=\"openSocialEditModal()\"\n                      (keydown.enter)=\"openSocialEditModal()\"\n                      (keydown.space)=\"openSocialEditModal()\"\n                    title=\"Edit Social Links & Company Name\"></i>\n                  }\n                </div>\n                <div class=\"copyright text-white\">\n                  2025 {{companyName}}.\n                </div>\n              </div>\n            </form>\n          </div>\n        }\n\n      </div>\n    </div>\n  </div>\n</section>\n\n\n\n<ng-template #bookMeeting\n  let-modal>\n  <div class=\"modal-header\">\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h3 class=\"text-center modal-basic-title\">\n      Thanks for getting in touch! Our team will be in contact shortly, or we\n      can compare calendars now &amp; schedule a time\n    </h3>\n    <button type=\"button\"\n      [eventTracker]=\"{\n        category: 'request-demo',\n        action: 'click',\n        label: 'cloudolive-landing-page-b',\n        value: 1\n      }\"\n      (click)=\"navigateToBookMeeting()\"\n      class=\"sign-btn sign-header-btn mx-auto d-block mb-3\">\n      Let's do it\n    </button>\n  </div>\n</ng-template>\n\n\n<ng-template #editFooterLinksModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Footer Links</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Footer Links Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropFooterLinks($event)\">\n      @for (footer of editingFooterLinks.items; track footer; let i = $index) {\n        <div class=\"border p-3 mb-3\" cdkDrag>\n          <div class=\"row\">\n            <div class=\"col-md-5 mb-2\">\n              <label for=\"footerTitle{{i}}\" class=\"form-label\">Title</label>\n              <input id=\"footerTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"footer.title\" name=\"input_footer.title_7\"/>\n            </div>\n            <div class=\"col-md-5 mb-2\">\n              <label for=\"footerPath{{i}}\" class=\"form-label\">Path</label>\n              <input id=\"footerPath{{i}}\" class=\"form-control\" [(ngModel)]=\"footer.path\" name=\"input_footer.path_8\"/>\n            </div>\n            <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n              <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeFooterLink(i)\" (keydown.enter)=\"removeFooterLink(i)\" (keydown.space)=\"removeFooterLink(i)\"></i>\n              <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n            </div>\n          </div>\n          <!-- Subtitles -->\n          <div cdkDropList (cdkDropListDropped)=\"dropSubtitles(i, $event)\">\n            @for (sub of footer.subtitles; track sub; let j = $index) {\n              <div class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n                <div class=\"col-md-5\">\n                  <label for=\"subtitleTitle{{i}}{{j}}\" class=\"form-label\">Subtitle Title</label>\n                  <input id=\"subtitleTitle{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.title\" name=\"input_sub.title_9\"/>\n                </div>\n                <div class=\"col-md-5\">\n                  <label for=\"subtitlePath{{i}}{{j}}\" class=\"form-label\">Subtitle Path</label>\n                  <input id=\"subtitlePath{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.path\" name=\"input_sub.path_10\"/>\n                </div>\n                <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n                  <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeSubtitle(i, j)\" (keydown.enter)=\"removeSubtitle(i, j)\" (keydown.space)=\"removeSubtitle(i, j)\"></i>\n                  <i class=\"fa fa-bars cursor-move in-page-bars-icon\" cdkDragHandle></i>\n                </div>\n              </div>\n            }\n          </div>\n          <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addSubtitle(i)\">\n            + Add Subtitle\n          </button>\n        </div>\n      }\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addFooterLink()\">\n      + Add Footer Link\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveFooterLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n\n\n<ng-template #logoModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <pw-custom-uploader\n      [aspectRatio]=\"'fullLogo'\"\n      [title]=\"'Main Contrast Logo'\"\n      [controlName]=\"'logo_main_contrast'\"\n      [previewData]=\"previewData\"\n      (saveEvent)=\"onSaveFile($event)\">\n    </pw-custom-uploader>\n  </div>\n</ng-template>\n\n\n\n<ng-template #hubspotEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Hubspot Embed</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"hubspotId\" class=\"form-label\">Hubspot ID</label>\n      <input id=\"hubspotId\" [(ngModel)]=\"editingHubspotId\" class=\"form-control\" name=\"input_editingHubspotId_11\"/>\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"hubspotEmbedDiv\" class=\"form-label\">Embed DIV</label>\n      <textarea id=\"hubspotEmbedDiv\" [(ngModel)]=\"editingHubspotHtml\" rows=\"8\" class=\"form-control\"></textarea>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveHubspotHtml(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n<ng-template #socialEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Social Links & Company Name</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"youtubeUrl\" class=\"form-label\">YouTube URL</label>\n      <input id=\"youtubeUrl\" [(ngModel)]=\"editingYoutubeUrl\" class=\"form-control\" name=\"input_editingYoutubeUrl_12\"/>\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"linkedinUrl\" class=\"form-label\">LinkedIn URL</label>\n      <input id=\"linkedinUrl\" [(ngModel)]=\"editingLinkedInUrl\" class=\"form-control\" name=\"input_editingLinkedInUrl_13\"/>\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"companyName\" class=\"form-label\">Company Name</label>\n      <input id=\"companyName\" [(ngModel)]=\"editingCompanyName\" class=\"form-control\" name=\"input_editingCompanyName_14\"/>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveSocialLinks(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n\n<ng-template #questionsEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Questions</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Questions Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropQuestions($event)\">\n      @for (q of editingQuestions; track q; let i = $index) {\n        <div class=\"border p-3 mb-3\" cdkDrag>\n          <div class=\"row\">\n            <div class=\"col-md-11 mb-2\">\n              <label for=\"questionText{{i}}\" class=\"form-label\">Question</label>\n              <input id=\"questionText{{i}}\" class=\"form-control\" [(ngModel)]=\"q.question\" placeholder=\"Enter question\" name=\"input_q.question_15\"/>\n            </div>\n            <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-4\">\n              <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n            </div>\n          </div>\n          <!-- Options Section -->\n          <div cdkDropList (cdkDropListDropped)=\"dropQuestionOptions(i, $event)\">\n            @for (opt of q.options; track opt; let j = $index) {\n              <div class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n                <div class=\"col-md-7 mb-2\">\n                  <label for=\"questionOption{{i}}{{j}}\" class=\"form-label\">Option</label>\n                  <input id=\"questionOption{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"opt.option\" placeholder=\"Enter option\" name=\"input_opt.option_16\"/>\n                </div>\n                <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n                  <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeQuestionOption(i, j)\" (keydown.enter)=\"removeQuestionOption(i, j)\" (keydown.enter)=\"removeQuestionOption(i, j)\"></i>\n                  <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n                </div>\n              </div>\n            }\n          </div>\n          <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addQuestionOption(i)\">+ Add Option</button>\n        </div>\n      }\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addNewQuestion()\">+ Add Question</button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveQuestions(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n", styles: [".product-explainer-section{background-color:#000}.footer-section{min-height:500px}@media(min-width:768px){.footer-section{min-height:600px}}.footer-section .container{transition:opacity .3s ease,visibility .3s ease}.footer-section input.form-control,.footer-section select.form-control,.footer-section textarea.form-control{background-color:#fff;border:none;color:#000;font-size:14px}.btn-primary{background-color:#007bff;border:none}.site-column{margin-top:2.9rem}.email-section{color:#fff;font-size:2rem}.address-section{margin-top:5rem}.address-text{line-height:2.2rem}.user-info{font-size:1.5rem}.user-info-label{font-size:1.7rem;font-weight:700}.contact-form form .form-field{display:flex;align-items:center;margin-bottom:1.2rem}.contact-form form .form-field label{width:130px;min-width:130px;margin:0;font-size:14px;color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:1px}.contact-form form .form-field p-dropdown{width:100%}.contact-form form .form-field input,.contact-form form .form-field select,.contact-form form .form-field textarea,.contact-form form .form-field ::ng-deep p-dropdown .p-inputwrapper{flex:1;border:none;border-radius:30px;padding:12px 20px;font-size:14px;width:100%!important;max-width:100%;color:#000}.contact-form form .form-field textarea{resize:vertical}.contact-form form .submit-button{background-color:#3b82f6;border:none;border-radius:30px;font-size:16px;font-weight:500;padding:10px 24px;margin-top:1.2rem}.input-select{height:43px}.select-label{width:210px!important}.copyright{margin-top:2rem;margin-left:4rem;font-size:19px;font-weight:700}.d-flex img{margin-right:0!important}.youtube-icon{height:38px}.enquiry-field{margin-left:.5rem;width:63%}::ng-deep .text-danger{margin-top:.25rem!important;margin-left:.5rem!important}.hubspot-container{min-height:400px;transition:opacity .3s ease}.hubspot-container:not(.content-loaded){opacity:0;pointer-events:none}.hubspot-container.content-loaded{opacity:1}@media(min-width:768px){.hubspot-container{margin-top:-3rem}}@media(min-width:768px)and (max-width:1200px){.container{padding:0rem 6rem!important}}.link-label{cursor:pointer;transition:color .3s}.link-label:hover{color:var(--first)}.icons img{transition:transform .3s ease,filter .3s ease;cursor:pointer}.icons img:hover{transform:scale(1.1);filter:brightness(1.2)}.logo-image{max-width:160px;width:160px;height:35px;object-fit:contain;aspect-ratio:160/35}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i8.FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: ["errorMsg", "displayError"] }, { kind: "component", type: i9.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.ReCaptcha2Component, selector: "ngx-recaptcha2", inputs: ["theme", "size"] }, { kind: "directive", type: i11.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i12.EventTrackerDirective, selector: "[eventTracker]", inputs: ["eventTracker"] }, { kind: "directive", type: i12.LazyImgDirective, selector: "img" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: Trial4ContactUsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: Trial4ContactUsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-trial-4-contact-us', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<section  #footerSection class=\"bg-black text-white py-5 footer-section\">\n  <div class=\"container\">\n    <div class=\"row\">\n\n      <!-- LEFT COLUMN -->\n      <div class=\"col-md-6 mb-4 d-flex flex-column justify-content-between\" [ngClass]=\"{ 'site-column': getFooterHubspotForm() }\">\n        <div>\n          <h3 class=\"mb-4 d-flex align-items-center\">\n            <span class=\"me-2 text-white\">Site Map:</span>\n            <i *ngIf=\"canEditResourcesValue\" class=\"fa fa-edit in-page-edit-icon cursor-pointer text-white ms-3\" (click)=\"openEditFooterLinksModal(editFooterLinksModal)\" (keydown.enter)=\"openEditFooterLinksModal(editFooterLinksModal)\" (keydown.space)=\"openEditFooterLinksModal(editFooterLinksModal)\" ngbTooltip=\"Edit Footer Links\"></i>\n          </h3>\n          <ul class=\"mt-4\">\n            <li routerLink=\"/\"\n            class=\"cursor-pointer user-info-label link-label\"> Home </li>\n            <li *ngFor=\"let link of footerLinks\" [routerLink]=\"link?.path\"\n              class=\"cursor-pointer user-info-label link-label mt-4\"><span  *ngIf=\"link?.title\">{{link?.title}}</span> </li>\n            <li routerLink=\"/login\"\n              class=\"cursor-pointer user-info-label mt-4 link-label\"> Log in </li>\n            <li [routerLink]=\"'/privacy-and-tos/' + tosId\"\n              class=\"cursor-pointer user-info-label mt-4 link-label\"> Privacy statement </li>\n          </ul>\n          <p class=\"address-section email-section mb-4\">\n            <span class=\"user-info-label\">Email: </span>\n            <ng-container *ngIf=\"!isEditingEmail; else editEmail\">\n              <span class=\"user-info\">{{ email }}</span>\n              <i *ngIf=\"canEditResourcesValue\" class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\" (click)=\"isEditingEmail = true\" (keydown.enter)=\"isEditingEmail = true\" (keydown.space)=\"isEditingEmail = true\"></i>\n            </ng-container>\n\n            <ng-template #editEmail>\n              <input\n                class=\"form-control d-inline w-auto\"\n                [(ngModel)]=\"editingEmail\"\n              id=\"input_editingEmail_7936\" name=\"input_editingEmail_7936\" />\n              <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveEmail()\">Save</button>\n              <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"isEditingEmail = false\">Cancel</button>\n            </ng-template>\n          </p>\n                    <span class=\"email-section mt-3 address-text\">\n            <span class=\"user-info-label\">\n              Address:\n              <i *ngIf=\"canEditResourcesValue\"\n                 class=\"fa fa-edit in-page-edit-icon cursor-pointer ms-2 text-white\"\n                 title=\"Edit Address\"\n                 (click)=\"isEditingStreet = true\"\n                 (keydown.enter)=\"isEditingStreet = true\"\n                 (keydown.space)=\"isEditingStreet = true\"></i>\n            </span><br/>\n\n            <ng-container *ngIf=\"!isEditingStreet; else editStreetBlock\">\n              <span class=\"address-text user-info\">{{ street }}</span>\n            </ng-container>\n\n            <ng-template #editStreetBlock>\n              <div class=\"d-flex align-items-center mt-3\">\n                <input class=\"form-control form-control-sm\" [(ngModel)]=\"editingStreet\" id=\"input_editingStreet_4768\" name=\"input_editingStreet_4768\" />\n                <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveStreet()\">Save</button>\n                <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"cancelStreet()\">Cancel</button>\n              </div>\n            </ng-template>\n\n          </span>\n\n        </div>\n        <div class=\"d-flex\">\n          <img [src]=\"logo\"\n               alt=\"Company logo\"\n               class=\"img-fluid mt-4 logo-image cursor-pointer\"\n               width=\"160\"\n               height=\"35\"\n               (click)=\"scrollToTop()\"\n               (keydown.enter)=\"scrollToTop()\"\n               (keydown.space)=\"scrollToTop()\"\n               title=\"Click to go to top of page\" />\n          <i *ngIf=\"canEditResourcesValue\"\n             class=\"fa fa-edit in-page-edit-icon fa-sm ms-3 cursor-pointer text-white align-self-center mt-3\"\n             (click)=\"openLogoEditModal()\"\n             (keydown.enter)=\"openLogoEditModal()\"\n             (keydown.space)=\"openLogoEditModal()\"\n             title=\"Edit Logo\"></i>\n        </div>\n      </div>\n\n      <!-- RIGHT COLUMN -->\n      <div class=\"col-md-6\">\n        <ng-container *ngIf=\"getFooterHubspotForm() as footerItem; else defaultForm\">\n            <div class=\"d-flex\">\n              <div\n                class=\"hubspot-container w-100 content-loaded\"\n                [innerHTML]=\"hubspotHtml\"\n                (load)=\"onHubspotLoad($event)\">\n              </div>\n              <i *ngIf=\"canEditResourcesValue\"\n              class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer\"\n              (click)=\"openHubspotEditModal(footerItem)\"\n              (keydown.enter)=\"openHubspotEditModal(footerItem)\"\n              (keydown.space)=\"openHubspotEditModal(footerItem)\"\n              title=\"Edit Hubspot Embed\"></i>\n            </div>\n          </ng-container>\n\n          <ng-template #defaultForm>\n          <div class=\"d-flex\">\n                <h3 class=\"text-white mb-4\"> <span class=\"text-white\">Get in touch:</span></h3>\n                <i *ngIf=\"canEditResourcesValue\"\n                class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3 mt-2\"\n                (click)=\"openQuestionsEditModal()\"\n                (keydown.enter)=\"openQuestionsEditModal()\"\n                (keydown.space)=\"openQuestionsEditModal()\"\n                title=\"Edit Questions\"></i>\n            </div>\n            <div class=\"contact-form\">\n              <form [formGroup]=\"form\">\n                <div class=\"mb-3\">\n                  <div class=\"email\">\n                    <div class=\"form-field\">\n                      <label for=\"email\">Email:</label>\n                      <div class=\"w-100\">\n                        <input type=\"text\"\n                          class=\"mb-1\"\n                          id=\"email\"\n                          formControlName=\"email\" name=\"input_email_3\"/>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('email').valid && (form.get('email').touched || submitted)\n                          \"\n                      errorMsg=\"Email is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"first_name\">First name:</label>\n                      <div class=\"w-100\">\n                        <input input type=\"text\"\n                        id=\"first_name\"\n                        formControlName=\"first_name\" name=\"input_first_name_4\"/>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('first_name').valid && (form.get('first_name').touched || submitted)\n                          \"\n                      errorMsg=\"First name is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"last_name\">Last name:</label>\n                      <input type=\"text\"\n                        id=\"last_name\"\n                        formControlName=\"last_name\" name=\"input_last_name_5\"/>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"company\">Company:</label>\n                      <input type=\"text\"\n                        id=\"company\"\n                        formControlName=\"company\" name=\"input_company_6\"/>\n                    </div>\n                    <div class=\"form-field\" *ngIf=\"hasValidOptions()\">\n                      <label id=\"resource-contact-psa-label\" class=\"select-label\">{{question}}</label>\n                      <p-select\n                        [attr.aria-labelledby]=\"'resource-contact-psa-label'\"\n                        formControlName=\"psa\"\n                        [options]=\"psaOptions\"\n                        [placeholder]=\"'Select PSA'\"\n                        styleClass=\"input-select\">\n                      </p-select>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"enquiry\" class=\"select-label\">How can we help you?</label>\n                      <div class=\"enquiry-field\">\n                        <textarea  id=\"enquiry\" formControlName=\"enquiry\" class=\"\">\n                                      </textarea>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('enquiry').valid && (form.get('enquiry').touched || submitted)\n                          \"\n                      errorMsg=\"Enquiry is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-end\">\n                  <div class=\"captcha-wrapper-container\"\n                  *ngIf=\"isCaptchaVerified\">\n                  <ngx-recaptcha2 [ngModelOptions]=\"{ standalone: true }\"\n                    [siteKey]=\"captchaKeyV2\"\n                    size=\"normal\"\n                    [(ngModel)]=\"recaptcha\"\n                    (success)=\"handleSuccess($event)\">\n                  </ngx-recaptcha2>\n                </div>\n                  <button type=\"submit\"\n                    (click)=\"onSubmit()\"\n                    *ngIf=\"!isCaptchaVerified\"\n                    class=\"sign-btn sign-header-btn mt-3\">\n                    {{ 'Button.Submit' | transloco }}\n                  </button>\n                </div>\n\n                <div class=\"d-flex align-items-center mt-4\">\n                  <div class=\"icons d-flex align-items-center\">\n                    <a [eventTracker]=\"{\n                        category: 'youtube',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                      [href]=\"youtubeUrl\"\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\">\n                      <img src=\"/assets/img/icons/youtube.png\"\n                        class=\"img-fluid youtube-icon\"\n                        width=\"54\"\n                        height=\"54\"\n                        alt=\"\" />\n                    </a>\n                    <a [eventTracker]=\"{\n                        category: 'linkedin',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                      [href]=\"linkedInUrl\"\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      class=\"ms-3\">\n                      <img src=\"/assets/img/icons/social/linkedin.svg\"\n                        class=\"img-fluid linkedin-icon\"\n                        width=\"48\"\n                        height=\"48\"\n                        alt=\"\" />\n                    </a>\n                    <i *ngIf=\"canEditResourcesValue\"\n                    class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\"\n                    (click)=\"openSocialEditModal()\"\n                    (keydown.enter)=\"openSocialEditModal()\"\n                    (keydown.space)=\"openSocialEditModal()\"\n                    title=\"Edit Social Links & Company Name\"></i>\n                  </div>\n                  <div class=\"copyright text-white\">\n                    2025 {{companyName}}.\n                  </div>\n                </div>\n              </form>\n            </div>\n          </ng-template>\n        </div>\n    </div>\n  </div>\n</section>\n\n\n\n<ng-template #bookMeeting\n  let-modal>\n  <div class=\"modal-header\">\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h3 class=\"text-center modal-basic-title\">\n      Thanks for getting in touch! Our team will be in contact shortly, or we\n      can compare calendars now &amp; schedule a time\n    </h3>\n    <button type=\"button\"\n      [eventTracker]=\"{\n        category: 'request-demo',\n        action: 'click',\n        label: 'cloudolive-landing-page-b',\n        value: 1\n      }\"\n      (click)=\"navigateToBookMeeting()\"\n      class=\"sign-btn sign-header-btn mx-auto d-block mb-3\">\n      Let's do it\n    </button>\n  </div>\n</ng-template>\n\n\n<ng-template #editFooterLinksModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Footer Links</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Footer Links Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropFooterLinks($event)\">\n      <div *ngFor=\"let footer of editingFooterLinks.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"footerTitle{{i}}\" class=\"form-label\">Title</label>\n            <input id=\"footerTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"footer.title\" name=\"input_footer.title_7\"/>\n          </div>\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"footerPath{{i}}\" class=\"form-label\">Path</label>\n            <input id=\"footerPath{{i}}\" class=\"form-control\" [(ngModel)]=\"footer.path\" name=\"input_footer.path_8\"/>\n          </div>\n          <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n            <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeFooterLink(i)\" (keydown.enter)=\"removeFooterLink(i)\" (keydown.space)=\"removeFooterLink(i)\"></i>\n            <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n          </div>\n        </div>\n\n        <!-- Subtitles -->\n        <div cdkDropList (cdkDropListDropped)=\"dropSubtitles(i, $event)\">\n          <div *ngFor=\"let sub of footer.subtitles; let j = index\" class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n            <div class=\"col-md-5\">\n              <label for=\"subtitleTitle{{i}}{{j}}\" class=\"form-label\">Subtitle Title</label>\n              <input id=\"subtitleTitle{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.title\" name=\"input_sub.title_9\"/>\n            </div>\n            <div class=\"col-md-5\">\n              <label for=\"subtitlePath{{i}}{{j}}\" class=\"form-label\">Subtitle Path</label>\n              <input id=\"subtitlePath{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.path\" name=\"input_sub.path_10\"/>\n            </div>\n            <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n              <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeSubtitle(i, j)\" (keydown.enter)=\"removeSubtitle(i, j)\" (keydown.space)=\"removeSubtitle(i, j)\"></i>\n              <i class=\"fa fa-bars cursor-move in-page-bars-icon\" cdkDragHandle></i>\n            </div>\n          </div>\n        </div>\n\n        <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addSubtitle(i)\">\n          + Add Subtitle\n        </button>\n      </div>\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addFooterLink()\">\n      + Add Footer Link\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveFooterLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n\n\n<ng-template #logoModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <pw-custom-uploader\n      [aspectRatio]=\"'fullLogo'\"\n      [title]=\"'Main Contrast Logo'\"\n      [controlName]=\"'logo_main_contrast'\"\n      [previewData]=\"previewData\"\n      (saveEvent)=\"onSaveFile($event)\">\n    </pw-custom-uploader>\n  </div>\n</ng-template>\n\n\n\n<ng-template #hubspotEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Hubspot Embed</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"hubspotId\" class=\"form-label\">Hubspot ID</label>\n      <input id=\"hubspotId\" [(ngModel)]=\"editingHubspotId\" class=\"form-control\" name=\"input_editingHubspotId_11\"/>\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"hubspotEmbedDiv\" class=\"form-label\">Embed DIV</label>\n      <textarea id=\"hubspotEmbedDiv\" [(ngModel)]=\"editingHubspotHtml\" rows=\"8\" class=\"form-control\"></textarea>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveHubspotHtml(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n<ng-template #socialEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Social Links & Company Name</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"youtubeUrl\" class=\"form-label\">YouTube URL</label>\n      <input id=\"youtubeUrl\" [(ngModel)]=\"editingYoutubeUrl\" class=\"form-control\" name=\"input_editingYoutubeUrl_12\"/>\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"linkedinUrl\" class=\"form-label\">LinkedIn URL</label>\n      <input id=\"linkedinUrl\" [(ngModel)]=\"editingLinkedInUrl\" class=\"form-control\" name=\"input_editingLinkedInUrl_13\"/>\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"companyName\" class=\"form-label\">Company Name</label>\n      <input id=\"companyName\" [(ngModel)]=\"editingCompanyName\" class=\"form-control\" name=\"input_editingCompanyName_14\"/>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveSocialLinks(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n\n<ng-template #questionsEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Questions</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Questions Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropQuestions($event)\">\n      <div *ngFor=\"let q of editingQuestions; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-11 mb-2\">\n            <label for=\"questionText{{i}}\" class=\"form-label\">Question</label>\n            <input id=\"questionText{{i}}\" class=\"form-control\" [(ngModel)]=\"q.question\" placeholder=\"Enter question\" name=\"input_q.question_15\"/>\n          </div>\n          <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-4\">\n            <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n          </div>\n        </div>\n\n        <!-- Options Section -->\n        <div cdkDropList (cdkDropListDropped)=\"dropQuestionOptions(i, $event)\">\n          <div *ngFor=\"let opt of q.options; let j = index\" class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n            <div class=\"col-md-7 mb-2\">\n              <label for=\"questionOption{{i}}{{j}}\" class=\"form-label\">Option</label>\n              <input id=\"questionOption{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"opt.option\" placeholder=\"Enter option\" name=\"input_opt.option_16\"/>\n            </div>\n            <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n              <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeQuestionOption(i, j)\" (keydown.enter)=\"removeQuestionOption(i, j)\" (keydown.enter)=\"removeQuestionOption(i, j)\"></i>\n              <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n            </div>\n          </div>\n        </div>\n\n        <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addQuestionOption(i)\">+ Add Option</button>\n      </div>\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addNewQuestion()\">+ Add Question</button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveQuestions(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n", styles: [".product-explainer-section{background-color:#000}.footer-section{min-height:500px}@media (min-width: 768px){.footer-section{min-height:600px}}.footer-section .container{transition:opacity .3s ease,visibility .3s ease}.footer-section input.form-control,.footer-section select.form-control,.footer-section textarea.form-control{background-color:#fff;border:none;color:#000;font-size:14px}.btn-primary{background-color:#007bff;border:none}.site-column{margin-top:2.9rem}.email-section{color:#fff;font-size:2rem}.address-section{margin-top:5rem}.address-text{line-height:2.2rem}.user-info{font-size:1.5rem}.user-info-label{font-size:1.7rem;font-weight:700}.contact-form form .form-field{display:flex;align-items:center;margin-bottom:1.2rem}.contact-form form .form-field label{width:130px;min-width:130px;margin:0;font-size:14px;color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:1px}.contact-form form .form-field p-dropdown{width:100%}.contact-form form .form-field input,.contact-form form .form-field select,.contact-form form .form-field textarea,.contact-form form .form-field ::ng-deep p-dropdown .p-inputwrapper{flex:1;border:none;border-radius:30px;padding:12px 20px;font-size:14px;width:100%!important;max-width:100%;color:#000}.contact-form form .form-field textarea{resize:vertical}.contact-form form .submit-button{background-color:#3b82f6;border:none;border-radius:30px;font-size:16px;font-weight:500;padding:10px 24px;margin-top:1.2rem}.input-select{height:43px}.select-label{width:210px!important}.copyright{margin-top:2rem;margin-left:4rem;font-size:19px;font-weight:700}.d-flex img{margin-right:0!important}.youtube-icon{height:38px}.enquiry-field{margin-left:.5rem;width:63%}::ng-deep .text-danger{margin-top:.25rem!important;margin-left:.5rem!important}.hubspot-container{min-height:400px;transition:opacity .3s ease}.hubspot-container:not(.content-loaded){opacity:0;pointer-events:none}.hubspot-container.content-loaded{opacity:1}@media (min-width: 768px){.hubspot-container{margin-top:-3rem}}@media (min-width: 768px) and (max-width: 1200px){.container{padding:0rem 6rem!important}}.link-label{cursor:pointer;transition:color .3s}.link-label:hover{color:var(--first)}.icons img{transition:transform .3s ease,filter .3s ease;cursor:pointer}.icons img:hover{transform:scale(1.1);filter:brightness(1.2)}.logo-image{max-width:160px;width:160px;height:35px;object-fit:contain;aspect-ratio:160/35}\n"] }]
+            args: [{ selector: 'pw-trial-4-contact-us', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<section  #footerSection class=\"bg-black text-white py-5 footer-section\">\n  <div class=\"container\">\n    <div class=\"row\">\n\n      <!-- LEFT COLUMN -->\n      <div class=\"col-md-6 mb-4 d-flex flex-column justify-content-between\" [ngClass]=\"{ 'site-column': getFooterHubspotForm() }\">\n        <div>\n          <h3 class=\"mb-4 d-flex align-items-center\">\n            <span class=\"me-2 text-white\">Site Map:</span>\n            @if (canEditResourcesValue) {\n              <i class=\"fa fa-edit in-page-edit-icon cursor-pointer text-white ms-3\" (click)=\"openEditFooterLinksModal(editFooterLinksModal)\" (keydown.enter)=\"openEditFooterLinksModal(editFooterLinksModal)\" (keydown.space)=\"openEditFooterLinksModal(editFooterLinksModal)\" ngbTooltip=\"Edit Footer Links\"></i>\n            }\n          </h3>\n          <ul class=\"mt-4\">\n            <li routerLink=\"/\"\n            class=\"cursor-pointer user-info-label link-label\"> Home </li>\n            @for (link of footerLinks; track link) {\n              <li [routerLink]=\"link?.path\"\n                class=\"cursor-pointer user-info-label link-label mt-4\">@if (link?.title) {\n                <span >{{link?.title}}</span>\n              } </li>\n            }\n            <li routerLink=\"/login\"\n            class=\"cursor-pointer user-info-label mt-4 link-label\"> Log in </li>\n            <li [routerLink]=\"'/privacy-and-tos/' + tosId\"\n            class=\"cursor-pointer user-info-label mt-4 link-label\"> Privacy statement </li>\n          </ul>\n          <p class=\"address-section email-section mb-4\">\n            <span class=\"user-info-label\">Email: </span>\n            @if (!isEditingEmail) {\n              <span class=\"user-info\">{{ email }}</span>\n              @if (canEditResourcesValue) {\n                <i class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\" (click)=\"isEditingEmail = true\" (keydown.enter)=\"isEditingEmail = true\" (keydown.space)=\"isEditingEmail = true\"></i>\n              }\n            } @else {\n              <input\n                class=\"form-control d-inline w-auto\"\n                [(ngModel)]=\"editingEmail\"\n                id=\"input_editingEmail_7936\" name=\"input_editingEmail_7936\" />\n              <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveEmail()\">Save</button>\n              <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"isEditingEmail = false\">Cancel</button>\n            }\n\n          </p>\n          <span class=\"email-section mt-3 address-text\">\n            <span class=\"user-info-label\">\n              Address:\n              @if (canEditResourcesValue) {\n                <i\n                  class=\"fa fa-edit in-page-edit-icon cursor-pointer ms-2 text-white\"\n                  title=\"Edit Address\"\n                  (click)=\"isEditingStreet = true\"\n                  (keydown.enter)=\"isEditingStreet = true\"\n                (keydown.space)=\"isEditingStreet = true\"></i>\n              }\n            </span><br/>\n\n            @if (!isEditingStreet) {\n              <span class=\"address-text user-info\">{{ street }}</span>\n            } @else {\n              <div class=\"d-flex align-items-center mt-3\">\n                <input class=\"form-control form-control-sm\" [(ngModel)]=\"editingStreet\" id=\"input_editingStreet_4768\" name=\"input_editingStreet_4768\" />\n                <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveStreet()\">Save</button>\n                <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"cancelStreet()\">Cancel</button>\n              </div>\n            }\n\n\n          </span>\n\n        </div>\n        <div class=\"d-flex\">\n          <img [src]=\"logo\"\n            alt=\"Company logo\"\n            class=\"img-fluid mt-4 logo-image cursor-pointer\"\n            width=\"160\"\n            height=\"35\"\n            (click)=\"scrollToTop()\"\n            (keydown.enter)=\"scrollToTop()\"\n            (keydown.space)=\"scrollToTop()\"\n            title=\"Click to go to top of page\" />\n          @if (canEditResourcesValue) {\n            <i\n              class=\"fa fa-edit in-page-edit-icon fa-sm ms-3 cursor-pointer text-white align-self-center mt-3\"\n              (click)=\"openLogoEditModal()\"\n              (keydown.enter)=\"openLogoEditModal()\"\n              (keydown.space)=\"openLogoEditModal()\"\n            title=\"Edit Logo\"></i>\n          }\n        </div>\n      </div>\n\n      <!-- RIGHT COLUMN -->\n      <div class=\"col-md-6\">\n        @if (getFooterHubspotForm(); as footerItem) {\n          <div class=\"d-flex\">\n            <div\n              class=\"hubspot-container w-100 content-loaded\"\n              [innerHTML]=\"hubspotHtml\"\n              (load)=\"onHubspotLoad($event)\">\n            </div>\n            @if (canEditResourcesValue) {\n              <i\n                class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer\"\n                (click)=\"openHubspotEditModal(footerItem)\"\n                (keydown.enter)=\"openHubspotEditModal(footerItem)\"\n                (keydown.space)=\"openHubspotEditModal(footerItem)\"\n              title=\"Edit Hubspot Embed\"></i>\n            }\n          </div>\n        } @else {\n          <div class=\"d-flex\">\n            <h3 class=\"text-white mb-4\"> <span class=\"text-white\">Get in touch:</span></h3>\n            @if (canEditResourcesValue) {\n              <i\n                class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3 mt-2\"\n                (click)=\"openQuestionsEditModal()\"\n                (keydown.enter)=\"openQuestionsEditModal()\"\n                (keydown.space)=\"openQuestionsEditModal()\"\n              title=\"Edit Questions\"></i>\n            }\n          </div>\n          <div class=\"contact-form\">\n            <form [formGroup]=\"form\">\n              <div class=\"mb-3\">\n                <div class=\"email\">\n                  <div class=\"form-field\">\n                    <label for=\"email\">Email:</label>\n                    <div class=\"w-100\">\n                      <input type=\"text\"\n                        class=\"mb-1\"\n                        id=\"email\"\n                        formControlName=\"email\" name=\"input_email_3\"/>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('email').valid && (form.get('email').touched || submitted)\n                          \"\n                        errorMsg=\"Email is required\">\n                      </pw-field-error-display>\n                    </div>\n                  </div>\n                  <div class=\"form-field\">\n                    <label for=\"first_name\">First name:</label>\n                    <div class=\"w-100\">\n                      <input input type=\"text\"\n                        id=\"first_name\"\n                        formControlName=\"first_name\" name=\"input_first_name_4\"/>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('first_name').valid && (form.get('first_name').touched || submitted)\n                          \"\n                        errorMsg=\"First name is required\">\n                      </pw-field-error-display>\n                    </div>\n                  </div>\n                  <div class=\"form-field\">\n                    <label for=\"last_name\">Last name:</label>\n                    <input type=\"text\"\n                      id=\"last_name\"\n                      formControlName=\"last_name\" name=\"input_last_name_5\"/>\n                  </div>\n                  <div class=\"form-field\">\n                    <label for=\"company\">Company:</label>\n                    <input type=\"text\"\n                      id=\"company\"\n                      formControlName=\"company\" name=\"input_company_6\"/>\n                  </div>\n                  @if (hasValidOptions()) {\n                    <div class=\"form-field\">\n                      <span id=\"resource-contact-psa-label\" class=\"select-label pw-label-style\">{{question}}</span>\n                      <p-select\n                        [attr.aria-labelledby]=\"'resource-contact-psa-label'\"\n                        formControlName=\"psa\"\n                        [options]=\"psaOptions\"\n                        [placeholder]=\"'Select PSA'\"\n                        styleClass=\"input-select\">\n                      </p-select>\n                    </div>\n                  }\n                  <div class=\"form-field\">\n                    <label for=\"enquiry\" class=\"select-label\">How can we help you?</label>\n                    <div class=\"enquiry-field\">\n                      <textarea  id=\"enquiry\" formControlName=\"enquiry\" class=\"\">\n                      </textarea>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('enquiry').valid && (form.get('enquiry').touched || submitted)\n                          \"\n                        errorMsg=\"Enquiry is required\">\n                      </pw-field-error-display>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-end\">\n                @if (isCaptchaVerified) {\n                  <div class=\"captcha-wrapper-container\"\n                    >\n                    <ngx-recaptcha2 [ngModelOptions]=\"{ standalone: true }\"\n                      [siteKey]=\"captchaKeyV2\"\n                      size=\"normal\"\n                      [(ngModel)]=\"recaptcha\"\n                      (success)=\"handleSuccess($event)\">\n                    </ngx-recaptcha2>\n                  </div>\n                }\n                @if (!isCaptchaVerified) {\n                  <button type=\"submit\"\n                    (click)=\"onSubmit()\"\n                    class=\"sign-btn sign-header-btn mt-3\">\n                    {{ 'Button.Submit' | transloco }}\n                  </button>\n                }\n              </div>\n              <div class=\"d-flex align-items-center mt-4\">\n                <div class=\"icons d-flex align-items-center\">\n                    <a [eventTracker]=\"{\n                        category: 'youtube',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                    [href]=\"youtubeUrl\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\">\n                    <img src=\"/assets/img/icons/youtube.png\"\n                      class=\"img-fluid youtube-icon\"\n                      width=\"54\"\n                      height=\"54\"\n                      alt=\"\" />\n                  </a>\n                    <a [eventTracker]=\"{\n                        category: 'linkedin',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                    [href]=\"linkedInUrl\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    class=\"ms-3\">\n                    <img src=\"/assets/img/icons/social/linkedin.svg\"\n                      class=\"img-fluid linkedin-icon\"\n                      width=\"48\"\n                      height=\"48\"\n                      alt=\"\" />\n                  </a>\n                  @if (canEditResourcesValue) {\n                    <i\n                      class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\"\n                      (click)=\"openSocialEditModal()\"\n                      (keydown.enter)=\"openSocialEditModal()\"\n                      (keydown.space)=\"openSocialEditModal()\"\n                    title=\"Edit Social Links & Company Name\"></i>\n                  }\n                </div>\n                <div class=\"copyright text-white\">\n                  2025 {{companyName}}.\n                </div>\n              </div>\n            </form>\n          </div>\n        }\n\n      </div>\n    </div>\n  </div>\n</section>\n\n\n\n<ng-template #bookMeeting\n  let-modal>\n  <div class=\"modal-header\">\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h3 class=\"text-center modal-basic-title\">\n      Thanks for getting in touch! Our team will be in contact shortly, or we\n      can compare calendars now &amp; schedule a time\n    </h3>\n    <button type=\"button\"\n      [eventTracker]=\"{\n        category: 'request-demo',\n        action: 'click',\n        label: 'cloudolive-landing-page-b',\n        value: 1\n      }\"\n      (click)=\"navigateToBookMeeting()\"\n      class=\"sign-btn sign-header-btn mx-auto d-block mb-3\">\n      Let's do it\n    </button>\n  </div>\n</ng-template>\n\n\n<ng-template #editFooterLinksModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Footer Links</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Footer Links Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropFooterLinks($event)\">\n      @for (footer of editingFooterLinks.items; track footer; let i = $index) {\n        <div class=\"border p-3 mb-3\" cdkDrag>\n          <div class=\"row\">\n            <div class=\"col-md-5 mb-2\">\n              <label for=\"footerTitle{{i}}\" class=\"form-label\">Title</label>\n              <input id=\"footerTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"footer.title\" name=\"input_footer.title_7\"/>\n            </div>\n            <div class=\"col-md-5 mb-2\">\n              <label for=\"footerPath{{i}}\" class=\"form-label\">Path</label>\n              <input id=\"footerPath{{i}}\" class=\"form-control\" [(ngModel)]=\"footer.path\" name=\"input_footer.path_8\"/>\n            </div>\n            <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n              <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeFooterLink(i)\" (keydown.enter)=\"removeFooterLink(i)\" (keydown.space)=\"removeFooterLink(i)\"></i>\n              <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n            </div>\n          </div>\n          <!-- Subtitles -->\n          <div cdkDropList (cdkDropListDropped)=\"dropSubtitles(i, $event)\">\n            @for (sub of footer.subtitles; track sub; let j = $index) {\n              <div class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n                <div class=\"col-md-5\">\n                  <label for=\"subtitleTitle{{i}}{{j}}\" class=\"form-label\">Subtitle Title</label>\n                  <input id=\"subtitleTitle{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.title\" name=\"input_sub.title_9\"/>\n                </div>\n                <div class=\"col-md-5\">\n                  <label for=\"subtitlePath{{i}}{{j}}\" class=\"form-label\">Subtitle Path</label>\n                  <input id=\"subtitlePath{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.path\" name=\"input_sub.path_10\"/>\n                </div>\n                <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n                  <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeSubtitle(i, j)\" (keydown.enter)=\"removeSubtitle(i, j)\" (keydown.space)=\"removeSubtitle(i, j)\"></i>\n                  <i class=\"fa fa-bars cursor-move in-page-bars-icon\" cdkDragHandle></i>\n                </div>\n              </div>\n            }\n          </div>\n          <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addSubtitle(i)\">\n            + Add Subtitle\n          </button>\n        </div>\n      }\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addFooterLink()\">\n      + Add Footer Link\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveFooterLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n\n\n<ng-template #logoModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <pw-custom-uploader\n      [aspectRatio]=\"'fullLogo'\"\n      [title]=\"'Main Contrast Logo'\"\n      [controlName]=\"'logo_main_contrast'\"\n      [previewData]=\"previewData\"\n      (saveEvent)=\"onSaveFile($event)\">\n    </pw-custom-uploader>\n  </div>\n</ng-template>\n\n\n\n<ng-template #hubspotEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Hubspot Embed</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"hubspotId\" class=\"form-label\">Hubspot ID</label>\n      <input id=\"hubspotId\" [(ngModel)]=\"editingHubspotId\" class=\"form-control\" name=\"input_editingHubspotId_11\"/>\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"hubspotEmbedDiv\" class=\"form-label\">Embed DIV</label>\n      <textarea id=\"hubspotEmbedDiv\" [(ngModel)]=\"editingHubspotHtml\" rows=\"8\" class=\"form-control\"></textarea>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveHubspotHtml(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n<ng-template #socialEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Social Links & Company Name</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"youtubeUrl\" class=\"form-label\">YouTube URL</label>\n      <input id=\"youtubeUrl\" [(ngModel)]=\"editingYoutubeUrl\" class=\"form-control\" name=\"input_editingYoutubeUrl_12\"/>\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"linkedinUrl\" class=\"form-label\">LinkedIn URL</label>\n      <input id=\"linkedinUrl\" [(ngModel)]=\"editingLinkedInUrl\" class=\"form-control\" name=\"input_editingLinkedInUrl_13\"/>\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"companyName\" class=\"form-label\">Company Name</label>\n      <input id=\"companyName\" [(ngModel)]=\"editingCompanyName\" class=\"form-control\" name=\"input_editingCompanyName_14\"/>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveSocialLinks(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n\n<ng-template #questionsEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Questions</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Questions Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropQuestions($event)\">\n      @for (q of editingQuestions; track q; let i = $index) {\n        <div class=\"border p-3 mb-3\" cdkDrag>\n          <div class=\"row\">\n            <div class=\"col-md-11 mb-2\">\n              <label for=\"questionText{{i}}\" class=\"form-label\">Question</label>\n              <input id=\"questionText{{i}}\" class=\"form-control\" [(ngModel)]=\"q.question\" placeholder=\"Enter question\" name=\"input_q.question_15\"/>\n            </div>\n            <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-4\">\n              <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n            </div>\n          </div>\n          <!-- Options Section -->\n          <div cdkDropList (cdkDropListDropped)=\"dropQuestionOptions(i, $event)\">\n            @for (opt of q.options; track opt; let j = $index) {\n              <div class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n                <div class=\"col-md-7 mb-2\">\n                  <label for=\"questionOption{{i}}{{j}}\" class=\"form-label\">Option</label>\n                  <input id=\"questionOption{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"opt.option\" placeholder=\"Enter option\" name=\"input_opt.option_16\"/>\n                </div>\n                <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n                  <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeQuestionOption(i, j)\" (keydown.enter)=\"removeQuestionOption(i, j)\" (keydown.enter)=\"removeQuestionOption(i, j)\"></i>\n                  <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n                </div>\n              </div>\n            }\n          </div>\n          <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addQuestionOption(i)\">+ Add Option</button>\n        </div>\n      }\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addNewQuestion()\">+ Add Question</button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveQuestions(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n", styles: [".product-explainer-section{background-color:#000}.footer-section{min-height:500px}@media(min-width:768px){.footer-section{min-height:600px}}.footer-section .container{transition:opacity .3s ease,visibility .3s ease}.footer-section input.form-control,.footer-section select.form-control,.footer-section textarea.form-control{background-color:#fff;border:none;color:#000;font-size:14px}.btn-primary{background-color:#007bff;border:none}.site-column{margin-top:2.9rem}.email-section{color:#fff;font-size:2rem}.address-section{margin-top:5rem}.address-text{line-height:2.2rem}.user-info{font-size:1.5rem}.user-info-label{font-size:1.7rem;font-weight:700}.contact-form form .form-field{display:flex;align-items:center;margin-bottom:1.2rem}.contact-form form .form-field label{width:130px;min-width:130px;margin:0;font-size:14px;color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:1px}.contact-form form .form-field p-dropdown{width:100%}.contact-form form .form-field input,.contact-form form .form-field select,.contact-form form .form-field textarea,.contact-form form .form-field ::ng-deep p-dropdown .p-inputwrapper{flex:1;border:none;border-radius:30px;padding:12px 20px;font-size:14px;width:100%!important;max-width:100%;color:#000}.contact-form form .form-field textarea{resize:vertical}.contact-form form .submit-button{background-color:#3b82f6;border:none;border-radius:30px;font-size:16px;font-weight:500;padding:10px 24px;margin-top:1.2rem}.input-select{height:43px}.select-label{width:210px!important}.copyright{margin-top:2rem;margin-left:4rem;font-size:19px;font-weight:700}.d-flex img{margin-right:0!important}.youtube-icon{height:38px}.enquiry-field{margin-left:.5rem;width:63%}::ng-deep .text-danger{margin-top:.25rem!important;margin-left:.5rem!important}.hubspot-container{min-height:400px;transition:opacity .3s ease}.hubspot-container:not(.content-loaded){opacity:0;pointer-events:none}.hubspot-container.content-loaded{opacity:1}@media(min-width:768px){.hubspot-container{margin-top:-3rem}}@media(min-width:768px)and (max-width:1200px){.container{padding:0rem 6rem!important}}.link-label{cursor:pointer;transition:color .3s}.link-label:hover{color:var(--first)}.icons img{transition:transform .3s ease,filter .3s ease;cursor:pointer}.icons img:hover{transform:scale(1.1);filter:brightness(1.2)}.logo-image{max-width:160px;width:160px;height:35px;object-fit:contain;aspect-ratio:160/35}\n"] }]
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: i2.AuthService }, { type: i3.CrmService }, { type: i4.DomSanitizer }, { type: i5.AdminService }, { type: i0.Injector }, { type: i2.AbTestService }, { type: i6.NgbModal }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -567,8 +586,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
             }] } });
 
 class Trial4SharedContactUsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: Trial4SharedContactUsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: Trial4SharedContactUsModule, declarations: [Trial4ContactUsComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: Trial4SharedContactUsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: Trial4SharedContactUsModule, declarations: [Trial4ContactUsComponent], imports: [CommonModule,
             FieldErrorDisplayModule,
             SelectModule,
             ReactiveFormsModule,
@@ -590,7 +609,7 @@ class Trial4SharedContactUsModule {
             CoreTranslocoModule,
             AdminModuleUtilsModule,
             DirectivesModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: Trial4SharedContactUsModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: Trial4SharedContactUsModule, imports: [CommonModule,
             FieldErrorDisplayModule,
             SelectModule,
             ReactiveFormsModule,
@@ -612,7 +631,7 @@ class Trial4SharedContactUsModule {
             AdminModuleUtilsModule,
             DirectivesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: Trial4SharedContactUsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: Trial4SharedContactUsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [Trial4ContactUsComponent],
@@ -648,11 +667,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
         }] });
 
 class DemoCardsComponent extends AppBaseComponent {
-    constructor(sanitizer, modalService, adminService, injector) {
+    constructor(sanitizer, modalService, adminService, injector, cdr) {
         super(injector);
         this.sanitizer = sanitizer;
         this.modalService = modalService;
         this.adminService = adminService;
+        this.cdr = cdr;
         this.editingBookingLinks = [];
         this.domainId = this.appConfig?.domain_id;
     }
@@ -661,6 +681,7 @@ class DemoCardsComponent extends AppBaseComponent {
             this.localStorage.getItem$('product').subscribe(res => {
                 const data = res ? JSON.parse(res) : null;
                 this.subscriptionId = data?.subscriptionId;
+                this.cdr.markForCheck();
             });
         }
         this.bookingLinks = (this.appConfig?.pages_config?.book_demo?.items ?? [])
@@ -711,6 +732,7 @@ class DemoCardsComponent extends AppBaseComponent {
             }));
             this.appConfig.pages_config.book_demo.items = [...this.editingBookingLinks]; // ✅ Like CTAs
             modal.close();
+            this.cdr.markForCheck();
         });
     }
     updateCanEditResourcesValue() {
@@ -719,13 +741,13 @@ class DemoCardsComponent extends AppBaseComponent {
     canEditResources() {
         return this.canEditResourcesValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DemoCardsComponent, deps: [{ token: i4.DomSanitizer }, { token: i6.NgbModal }, { token: i5.AdminService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: DemoCardsComponent, isStandalone: false, selector: "pw-demo-card", inputs: { user: "user", userLoggedIn: "userLoggedIn" }, viewQueries: [{ propertyName: "editBookLinksModal", first: true, predicate: ["editBookLinksModal"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- EDIT ICON -->\n\n<!-- DEMO LINKS -->\n<div class=\"row text-center\">\n  <i *ngIf=\"canEditResourcesValue\"\n    class=\"fa fa-edit in-page-edit-icon mb-3 cursor-pointer\"\n    title=\"Edit Booking Links\"\n    (click)=\"openEditBookLinks(editBookLinksModal)\"\n    (keydown.enter)=\"openEditBookLinks(editBookLinksModal)\"\n    (keydown.space)=\"openEditBookLinks(editBookLinksModal)\">\n  </i>\n  <div class=\"col-md-6 col-lg-4\" *ngFor=\"let link of bookingLinks\">\n    <h5 class=\"mb-3\" *ngIf=\"link?.url && link?.title\">{{ link?.title }}</h5>\n    <iframe *ngIf=\"link?.url\"\n      [src]=\"link?.url\"\n      width=\"100%\"\n      title=\"Booking frame\"\n      height=\"600\"\n      class=\"iframe-no-border\">\n    </iframe>\n  </div>\n</div>\n\n<!-- MODAL TEMPLATE -->\n<ng-template #editBookLinksModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Book Demo Links</h5>\n    <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\" aria-label=\"Close\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <div cdkDropList (cdkDropListDropped)=\"dropBookingLink($event)\">\n      <div *ngFor=\"let item of editingBookingLinks; let i = index\" class=\"card p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-5\">\n            <label for=\"demoLinkTitle{{i}}\" class=\"form-label\">Link Title</label>\n            <input id=\"demoLinkTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"item.title\" name=\"input_item.title_1\"/>\n          </div>\n          <div class=\"col-md-5\">\n            <label for=\"demoLinkUrl{{i}}\" class=\"form-label\">Link URL</label>\n            <input id=\"demoLinkUrl{{i}}\" class=\"form-control\" [(ngModel)]=\"item.url\" name=\"input_item.url_2\"/>\n          </div>\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 in-page-trash-icon 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 in-page-bars-icon cursor-move\"\n              cdkDragHandle\n              ngbTooltip=\"Drag to reorder\"\n              aria-hidden=\"true\"\n            ></i>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <button class=\"btn btn-outline-primary mt-3\" (click)=\"addBookingLink()\">\n      <i class=\"fa fa-plus me-1\"></i> Add Book Demo Link\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveBookingLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n", styles: [".iframe-no-border{border:0}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DemoCardsComponent, deps: [{ token: i4.DomSanitizer }, { token: i6.NgbModal }, { token: i5.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: DemoCardsComponent, isStandalone: false, selector: "pw-demo-card", inputs: { user: "user", userLoggedIn: "userLoggedIn" }, viewQueries: [{ propertyName: "editBookLinksModal", first: true, predicate: ["editBookLinksModal"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- EDIT ICON -->\n\n<!-- DEMO LINKS -->\n<div class=\"row text-center\">\n  @if (canEditResourcesValue) {\n    <i\n      class=\"fa fa-edit in-page-edit-icon mb-3 cursor-pointer\"\n      title=\"Edit Booking Links\"\n      (click)=\"openEditBookLinks(editBookLinksModal)\"\n      (keydown.enter)=\"openEditBookLinks(editBookLinksModal)\"\n      (keydown.space)=\"openEditBookLinks(editBookLinksModal)\">\n    </i>\n  }\n  @for (link of bookingLinks; track link) {\n    <div class=\"col-md-6 col-lg-4\">\n      @if (link?.url && link?.title) {\n        <h5 class=\"mb-3\">{{ link?.title }}</h5>\n      }\n      @if (link?.url) {\n        <iframe\n          [src]=\"link?.url\"\n          width=\"100%\"\n          title=\"Booking frame\"\n          height=\"600\"\n          class=\"iframe-no-border\">\n        </iframe>\n      }\n    </div>\n  }\n</div>\n\n<!-- MODAL TEMPLATE -->\n<ng-template #editBookLinksModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Book Demo Links</h5>\n    <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\" aria-label=\"Close\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <div cdkDropList (cdkDropListDropped)=\"dropBookingLink($event)\">\n      @for (item of editingBookingLinks; track item; let i = $index) {\n        <div class=\"card p-3 mb-3\" cdkDrag>\n          <div class=\"row\">\n            <div class=\"col-md-5\">\n              <label for=\"demoLinkTitle{{i}}\" class=\"form-label\">Link Title</label>\n              <input id=\"demoLinkTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"item.title\" name=\"input_item.title_1\"/>\n            </div>\n            <div class=\"col-md-5\">\n              <label for=\"demoLinkUrl{{i}}\" class=\"form-label\">Link URL</label>\n              <input id=\"demoLinkUrl{{i}}\" class=\"form-control\" [(ngModel)]=\"item.url\" name=\"input_item.url_2\"/>\n            </div>\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 in-page-trash-icon delete-icon text-danger\"\n                aria-hidden=\"true\"\n              ></i>\n            </div>\n            <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n              <i\n                class=\"fa fa-bars in-page-bars-icon cursor-move\"\n                cdkDragHandle\n                ngbTooltip=\"Drag to reorder\"\n                aria-hidden=\"true\"\n              ></i>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    <button class=\"btn btn-outline-primary mt-3\" (click)=\"addBookingLink()\">\n      <i class=\"fa fa-plus me-1\"></i> Add Book Demo Link\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveBookingLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n", styles: [".iframe-no-border{border:0}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$1.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: i5$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DemoCardsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DemoCardsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-demo-card', standalone: false, template: "<!-- EDIT ICON -->\n\n<!-- DEMO LINKS -->\n<div class=\"row text-center\">\n  <i *ngIf=\"canEditResourcesValue\"\n    class=\"fa fa-edit in-page-edit-icon mb-3 cursor-pointer\"\n    title=\"Edit Booking Links\"\n    (click)=\"openEditBookLinks(editBookLinksModal)\"\n    (keydown.enter)=\"openEditBookLinks(editBookLinksModal)\"\n    (keydown.space)=\"openEditBookLinks(editBookLinksModal)\">\n  </i>\n  <div class=\"col-md-6 col-lg-4\" *ngFor=\"let link of bookingLinks\">\n    <h5 class=\"mb-3\" *ngIf=\"link?.url && link?.title\">{{ link?.title }}</h5>\n    <iframe *ngIf=\"link?.url\"\n      [src]=\"link?.url\"\n      width=\"100%\"\n      title=\"Booking frame\"\n      height=\"600\"\n      class=\"iframe-no-border\">\n    </iframe>\n  </div>\n</div>\n\n<!-- MODAL TEMPLATE -->\n<ng-template #editBookLinksModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Book Demo Links</h5>\n    <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\" aria-label=\"Close\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <div cdkDropList (cdkDropListDropped)=\"dropBookingLink($event)\">\n      <div *ngFor=\"let item of editingBookingLinks; let i = index\" class=\"card p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-5\">\n            <label for=\"demoLinkTitle{{i}}\" class=\"form-label\">Link Title</label>\n            <input id=\"demoLinkTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"item.title\" name=\"input_item.title_1\"/>\n          </div>\n          <div class=\"col-md-5\">\n            <label for=\"demoLinkUrl{{i}}\" class=\"form-label\">Link URL</label>\n            <input id=\"demoLinkUrl{{i}}\" class=\"form-control\" [(ngModel)]=\"item.url\" name=\"input_item.url_2\"/>\n          </div>\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 in-page-trash-icon 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 in-page-bars-icon cursor-move\"\n              cdkDragHandle\n              ngbTooltip=\"Drag to reorder\"\n              aria-hidden=\"true\"\n            ></i>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <button class=\"btn btn-outline-primary mt-3\" (click)=\"addBookingLink()\">\n      <i class=\"fa fa-plus me-1\"></i> Add Book Demo Link\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveBookingLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n", styles: [".iframe-no-border{border:0}\n"] }]
-        }], ctorParameters: () => [{ type: i4.DomSanitizer }, { type: i6.NgbModal }, { type: i5.AdminService }, { type: i0.Injector }], propDecorators: { user: [{
+            args: [{ selector: 'pw-demo-card', standalone: false, template: "<!-- EDIT ICON -->\n\n<!-- DEMO LINKS -->\n<div class=\"row text-center\">\n  @if (canEditResourcesValue) {\n    <i\n      class=\"fa fa-edit in-page-edit-icon mb-3 cursor-pointer\"\n      title=\"Edit Booking Links\"\n      (click)=\"openEditBookLinks(editBookLinksModal)\"\n      (keydown.enter)=\"openEditBookLinks(editBookLinksModal)\"\n      (keydown.space)=\"openEditBookLinks(editBookLinksModal)\">\n    </i>\n  }\n  @for (link of bookingLinks; track link) {\n    <div class=\"col-md-6 col-lg-4\">\n      @if (link?.url && link?.title) {\n        <h5 class=\"mb-3\">{{ link?.title }}</h5>\n      }\n      @if (link?.url) {\n        <iframe\n          [src]=\"link?.url\"\n          width=\"100%\"\n          title=\"Booking frame\"\n          height=\"600\"\n          class=\"iframe-no-border\">\n        </iframe>\n      }\n    </div>\n  }\n</div>\n\n<!-- MODAL TEMPLATE -->\n<ng-template #editBookLinksModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Book Demo Links</h5>\n    <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\" aria-label=\"Close\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <div cdkDropList (cdkDropListDropped)=\"dropBookingLink($event)\">\n      @for (item of editingBookingLinks; track item; let i = $index) {\n        <div class=\"card p-3 mb-3\" cdkDrag>\n          <div class=\"row\">\n            <div class=\"col-md-5\">\n              <label for=\"demoLinkTitle{{i}}\" class=\"form-label\">Link Title</label>\n              <input id=\"demoLinkTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"item.title\" name=\"input_item.title_1\"/>\n            </div>\n            <div class=\"col-md-5\">\n              <label for=\"demoLinkUrl{{i}}\" class=\"form-label\">Link URL</label>\n              <input id=\"demoLinkUrl{{i}}\" class=\"form-control\" [(ngModel)]=\"item.url\" name=\"input_item.url_2\"/>\n            </div>\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 in-page-trash-icon delete-icon text-danger\"\n                aria-hidden=\"true\"\n              ></i>\n            </div>\n            <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n              <i\n                class=\"fa fa-bars in-page-bars-icon cursor-move\"\n                cdkDragHandle\n                ngbTooltip=\"Drag to reorder\"\n                aria-hidden=\"true\"\n              ></i>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    <button class=\"btn btn-outline-primary mt-3\" (click)=\"addBookingLink()\">\n      <i class=\"fa fa-plus me-1\"></i> Add Book Demo Link\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveBookingLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n", styles: [".iframe-no-border{border:0}\n"] }]
+        }], ctorParameters: () => [{ type: i4.DomSanitizer }, { type: i6.NgbModal }, { type: i5.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { user: [{
                 type: Input
             }], userLoggedIn: [{
                 type: Input
@@ -735,15 +757,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
             }] } });
 
 class DemoCardsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DemoCardsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: DemoCardsModule, declarations: [DemoCardsComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DemoCardsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: DemoCardsModule, declarations: [DemoCardsComponent], imports: [CommonModule,
             FormsModule,
             DragDropModule,
             NgbModalModule,
             DirectivesModule,
             PipesModule,
             AdminModuleUtilsModule], exports: [DemoCardsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DemoCardsModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DemoCardsModule, imports: [CommonModule,
             FormsModule,
             DragDropModule,
             NgbModalModule,
@@ -751,7 +773,7 @@ class DemoCardsModule {
             PipesModule,
             AdminModuleUtilsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DemoCardsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DemoCardsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DemoCardsComponent],