@posiwise/resource-contact-us 0.0.9 → 0.0.10

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

@@ -33,6 +33,8 @@ import { CoreTranslocoModule } from '@posiwise/core-transloco';
 import { PipesModule } from '@posiwise/pipes';
 
 class Trial4ContactUsComponent extends AppBaseComponent {
+    // Footer is always visible to prevent layout shift
+    // Removed IntersectionObserver lazy loading
     openQuestionsEditModal() {
         this.editingQuestions = JSON.parse(JSON.stringify(this.editingQuestions ?? []));
         this.modalService.open(this.questionsEditModal, { centered: true, size: 'lg' });
@@ -49,7 +51,6 @@ class Trial4ContactUsComponent extends AppBaseComponent {
         this.cdr = cdr;
         this.document = document;
         this.editingQuestions = [];
-        this.isFooterVisible = false;
         this.recaptcha = null;
         this.subscriptionId = this.appConfig.crm.subscription_id;
         this.sourceId = this.appConfig.crm.source_id;
@@ -82,11 +83,25 @@ class Trial4ContactUsComponent extends AppBaseComponent {
         this.contactUsForm();
     }
     ngOnInit() {
-        setTimeout(() => (this.isHubspotReady = true), 2000);
+        // Defer Hubspot ready state to avoid blocking initial render
+        // Use requestIdleCallback if available, otherwise setTimeout with longer delay
+        if ('requestIdleCallback' in window) {
+            requestIdleCallback(() => {
+                setTimeout(() => (this.isHubspotReady = true), 0);
+                this.cdr.markForCheck();
+            }, { timeout: 2000 });
+        }
+        else {
+            setTimeout(() => {
+                this.isHubspotReady = true;
+                this.cdr.markForCheck();
+            }, 2000);
+        }
         if (this.userLoggedIn) {
             this.localStorage.getItem$('product').subscribe(res => {
                 const data = res ? JSON.parse(res) : null;
                 this.id = data?.subscriptionId;
+                this.cdr.markForCheck();
             });
         }
         this.previewData = {
@@ -219,15 +234,20 @@ class Trial4ContactUsComponent extends AppBaseComponent {
         return this.questions?.[0]?.options?.some(opt => opt.option?.trim());
     }
     ngAfterViewInit() {
-        this.watchIframeHeightChange();
-        this.observer = new IntersectionObserver(([entry]) => {
-            if (entry.isIntersecting) {
-                this.isFooterVisible = true;
-                this.cdr.detectChanges();
-                this.observer?.disconnect();
-            }
-        }, { threshold: 0.1 });
-        this.observer.observe(this.footerSection.nativeElement);
+        // Defer iframe watching to avoid blocking initial render
+        // Use requestIdleCallback or setTimeout to defer to next event loop
+        if ('requestIdleCallback' in window) {
+            requestIdleCallback(() => {
+                this.watchIframeHeightChange();
+            }, { timeout: 1000 });
+        }
+        else {
+            setTimeout(() => {
+                this.watchIframeHeightChange();
+            }, 0);
+        }
+        // Removed IntersectionObserver to prevent layout shift
+        // Footer is now visible immediately, space is reserved via CSS min-height
     }
     openEditFooterLinksModal(content) {
         this.footerLinksData = this.footerLinksData ?? {};
@@ -243,22 +263,56 @@ class Trial4ContactUsComponent extends AppBaseComponent {
         const iframe = this.document.querySelector('.hubspot-container');
         if (!iframe)
             return;
-        const interval = setInterval(() => {
+        // Use requestAnimationFrame for better performance instead of setInterval
+        // This reduces blocking time and is more efficient
+        let lastHeight = 0;
+        let checkCount = 0;
+        const maxChecks = 20; // Stop after ~10 seconds (20 * 500ms)
+        const checkHeight = () => {
+            checkCount++;
             const newHeight = iframe['offsetHeight'];
-            if (newHeight === 250) {
-                clearInterval(interval);
+            if (newHeight === 250 && newHeight !== lastHeight) {
                 this.callAbTestFinish();
+                return; // Stop checking once target height is reached
+            }
+            lastHeight = newHeight;
+            // Check less frequently (every ~500ms equivalent) using requestAnimationFrame
+            // Only continue if height hasn't reached target and we haven't exceeded max checks
+            if (newHeight !== 250 && checkCount < maxChecks) {
+                this.heightCheckTimeout = setTimeout(() => {
+                    requestAnimationFrame(checkHeight);
+                }, 500);
             }
-        }, 300);
+        };
+        // Start checking after a short delay to avoid blocking initial render
+        this.heightCheckTimeout = setTimeout(() => {
+            requestAnimationFrame(checkHeight);
+        }, 100);
+    }
+    ngOnDestroy() {
+        // Clean up timeouts to prevent memory leaks
+        if (this.heightCheckTimeout) {
+            clearTimeout(this.heightCheckTimeout);
+        }
+        if (this.hubspotReadyTimeout) {
+            clearTimeout(this.hubspotReadyTimeout);
+        }
     }
     // New method to handle Hubspot content loading
     onHubspotLoad(event) {
         const container = event.target;
         container.classList.add('content-loaded');
-        // Optional: Trigger layout recalculation
-        setTimeout(() => {
-            window.dispatchEvent(new Event('resize'));
-        }, 100);
+        // Defer layout recalculation to avoid blocking
+        if ('requestIdleCallback' in window) {
+            requestIdleCallback(() => {
+                window.dispatchEvent(new Event('resize'));
+            });
+        }
+        else {
+            setTimeout(() => {
+                window.dispatchEvent(new Event('resize'));
+            }, 100);
+        }
     }
     callAbTestFinish() {
         if (this.experimentName && this.microserviceName) {
@@ -461,15 +515,12 @@ class Trial4ContactUsComponent extends AppBaseComponent {
     canEditResources() {
         return this.canEditResourcesValue;
     }
-    ngOnDestroy() {
-        this.observer?.disconnect();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", 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: "17.3.11", type: Trial4ContactUsComponent, 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\" *ngIf=\"isFooterVisible\">\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              />\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\" />\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\" *ngIf=\"isFooterVisible\">\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\" />\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\" />\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\" />\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"company\">Company:</label>\n                      <input type=\"text\"\n                        id=\"company\"\n                        formControlName=\"company\" />\n                    </div>\n                    <div class=\"form-field\" *ngIf=\"hasValidOptions()\">\n                      <label for=\"psa\" class=\"select-label\">{{question}}</label>\n                      <p-dropdown\n                        formControlName=\"psa\"\n                        [options]=\"psaOptions\"\n                        [placeholder]=\"'Select PSA'\"\n                        styleClass=\"input-select\">\n                      </p-dropdown>\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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 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}@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.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: Trial4ContactUsComponent, 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              />\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\" />\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\" />\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\" />\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\" />\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"company\">Company:</label>\n                      <input type=\"text\"\n                        id=\"company\"\n                        formControlName=\"company\" />\n                    </div>\n                    <div class=\"form-field\" *ngIf=\"hasValidOptions()\">\n                      <label for=\"psa\" class=\"select-label\">{{question}}</label>\n                      <p-dropdown\n                        formControlName=\"psa\"\n                        [options]=\"psaOptions\"\n                        [placeholder]=\"'Select PSA'\"\n                        styleClass=\"input-select\">\n                      </p-dropdown>\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Trial4ContactUsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-trial-4-contact-us', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section  #footerSection class=\"bg-black text-white py-5 footer-section\">\n  <div class=\"container\" *ngIf=\"isFooterVisible\">\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              />\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\" />\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\" *ngIf=\"isFooterVisible\">\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\" />\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\" />\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\" />\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"company\">Company:</label>\n                      <input type=\"text\"\n                        id=\"company\"\n                        formControlName=\"company\" />\n                    </div>\n                    <div class=\"form-field\" *ngIf=\"hasValidOptions()\">\n                      <label for=\"psa\" class=\"select-label\">{{question}}</label>\n                      <p-dropdown\n                        formControlName=\"psa\"\n                        [options]=\"psaOptions\"\n                        [placeholder]=\"'Select PSA'\"\n                        styleClass=\"input-select\">\n                      </p-dropdown>\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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 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}@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, 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              />\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\" />\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\" />\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\" />\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\" />\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"company\">Company:</label>\n                      <input type=\"text\"\n                        id=\"company\"\n                        formControlName=\"company\" />\n                    </div>\n                    <div class=\"form-field\" *ngIf=\"hasValidOptions()\">\n                      <label for=\"psa\" class=\"select-label\">{{question}}</label>\n                      <p-dropdown\n                        formControlName=\"psa\"\n                        [options]=\"psaOptions\"\n                        [placeholder]=\"'Select PSA'\"\n                        styleClass=\"input-select\">\n                      </p-dropdown>\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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\" />\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"] }]
         }], 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]