@posiwise/resource-contact-us 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/esm2022/lib/resource-contact-us/resource-contact-us.component.mjs +27 -76
  2. package/fesm2022/posiwise-resource-contact-us.mjs +26 -75
  3. package/fesm2022/posiwise-resource-contact-us.mjs.map +1 -1
  4. package/lib/resource-contact-us/resource-contact-us.component.d.ts +3 -3
  5. package/package.json +1 -1
package/fesm2022/posiwise-resource-contact-us.mjs CHANGED
@@ -33,8 +33,6 @@ import { CoreTranslocoModule } from '@posiwise/core-transloco';
33
33
  import { PipesModule } from '@posiwise/pipes';
34
34
 
35
35
  class Trial4ContactUsComponent extends AppBaseComponent {
36
- // Footer is always visible to prevent layout shift
37
- // Removed IntersectionObserver lazy loading
38
36
  openQuestionsEditModal() {
39
37
  this.editingQuestions = JSON.parse(JSON.stringify(this.editingQuestions ?? []));
40
38
  this.modalService.open(this.questionsEditModal, { centered: true, size: 'lg' });
@@ -51,6 +49,7 @@ class Trial4ContactUsComponent extends AppBaseComponent {
51
49
  this.cdr = cdr;
52
50
  this.document = document;
53
51
  this.editingQuestions = [];
52
+ this.isFooterVisible = false;
54
53
  this.recaptcha = null;
55
54
  this.subscriptionId = this.appConfig.crm.subscription_id;
56
55
  this.sourceId = this.appConfig.crm.source_id;
@@ -83,25 +82,11 @@ class Trial4ContactUsComponent extends AppBaseComponent {
83
82
  this.contactUsForm();
84
83
  }
85
84
  ngOnInit() {
86
- // Defer Hubspot ready state to avoid blocking initial render
87
- // Use requestIdleCallback if available, otherwise setTimeout with longer delay
88
- if ('requestIdleCallback' in window) {
89
- requestIdleCallback(() => {
90
- setTimeout(() => (this.isHubspotReady = true), 0);
91
- this.cdr.markForCheck();
92
- }, { timeout: 2000 });
93
- }
94
- else {
95
- setTimeout(() => {
96
- this.isHubspotReady = true;
97
- this.cdr.markForCheck();
98
- }, 2000);
99
- }
85
+ setTimeout(() => (this.isHubspotReady = true), 2000);
100
86
  if (this.userLoggedIn) {
101
87
  this.localStorage.getItem$('product').subscribe(res => {
102
88
  const data = res ? JSON.parse(res) : null;
103
89
  this.id = data?.subscriptionId;
104
- this.cdr.markForCheck();
105
90
  });
106
91
  }
107
92
  this.previewData = {
@@ -234,20 +219,16 @@ class Trial4ContactUsComponent extends AppBaseComponent {
234
219
  return this.questions?.[0]?.options?.some(opt => opt.option?.trim());
235
220
  }
236
221
  ngAfterViewInit() {
237
- // Defer iframe watching to avoid blocking initial render
238
- // Use requestIdleCallback or setTimeout to defer to next event loop
239
- if ('requestIdleCallback' in window) {
240
- requestIdleCallback(() => {
241
- this.watchIframeHeightChange();
242
- }, { timeout: 1000 });
243
- }
244
- else {
245
- setTimeout(() => {
246
- this.watchIframeHeightChange();
247
- }, 0);
248
- }
249
- // Removed IntersectionObserver to prevent layout shift
250
- // Footer is now visible immediately, space is reserved via CSS min-height
222
+ this.watchIframeHeightChange();
223
+ this.observer = new IntersectionObserver(([entry]) => {
224
+ if (entry.isIntersecting) {
225
+ this.isFooterVisible = true;
226
+ console.log(this.isFooterVisible, "hey");
227
+ this.cdr.detectChanges();
228
+ this.observer?.disconnect();
229
+ }
230
+ }, { threshold: 0.1 });
231
+ this.observer.observe(this.footerSection.nativeElement);
251
232
  }
252
233
  openEditFooterLinksModal(content) {
253
234
  this.footerLinksData = this.footerLinksData ?? {};
@@ -263,56 +244,22 @@ class Trial4ContactUsComponent extends AppBaseComponent {
263
244
  const iframe = this.document.querySelector('.hubspot-container');
264
245
  if (!iframe)
265
246
  return;
266
- // Use requestAnimationFrame for better performance instead of setInterval
267
- // This reduces blocking time and is more efficient
268
- let lastHeight = 0;
269
- let checkCount = 0;
270
- const maxChecks = 20; // Stop after ~10 seconds (20 * 500ms)
271
- const checkHeight = () => {
272
- checkCount++;
247
+ const interval = setInterval(() => {
273
248
  const newHeight = iframe['offsetHeight'];
274
- if (newHeight === 250 && newHeight !== lastHeight) {
249
+ if (newHeight === 250) {
250
+ clearInterval(interval);
275
251
  this.callAbTestFinish();
276
- return; // Stop checking once target height is reached
277
- }
278
- lastHeight = newHeight;
279
- // Check less frequently (every ~500ms equivalent) using requestAnimationFrame
280
- // Only continue if height hasn't reached target and we haven't exceeded max checks
281
- if (newHeight !== 250 && checkCount < maxChecks) {
282
- this.heightCheckTimeout = setTimeout(() => {
283
- requestAnimationFrame(checkHeight);
284
- }, 500);
285
252
  }
286
- };
287
- // Start checking after a short delay to avoid blocking initial render
288
- this.heightCheckTimeout = setTimeout(() => {
289
- requestAnimationFrame(checkHeight);
290
- }, 100);
291
- }
292
- ngOnDestroy() {
293
- // Clean up timeouts to prevent memory leaks
294
- if (this.heightCheckTimeout) {
295
- clearTimeout(this.heightCheckTimeout);
296
- }
297
- if (this.hubspotReadyTimeout) {
298
- clearTimeout(this.hubspotReadyTimeout);
299
- }
253
+ }, 300);
300
254
  }
301
255
  // New method to handle Hubspot content loading
302
256
  onHubspotLoad(event) {
303
257
  const container = event.target;
304
258
  container.classList.add('content-loaded');
305
- // Defer layout recalculation to avoid blocking
306
- if ('requestIdleCallback' in window) {
307
- requestIdleCallback(() => {
308
- window.dispatchEvent(new Event('resize'));
309
- });
310
- }
311
- else {
312
- setTimeout(() => {
313
- window.dispatchEvent(new Event('resize'));
314
- }, 100);
315
- }
259
+ // Optional: Trigger layout recalculation
260
+ setTimeout(() => {
261
+ window.dispatchEvent(new Event('resize'));
262
+ }, 100);
316
263
  }
317
264
  callAbTestFinish() {
318
265
  if (this.experimentName && this.microserviceName) {
@@ -398,6 +345,7 @@ class Trial4ContactUsComponent extends AppBaseComponent {
398
345
  if (!this.hubspot?.length) {
399
346
  return null;
400
347
  }
348
+ console.log('this.hubspot', this.hubspot);
401
349
  return this.hubspot.find(item => item.position === 'footer') ?? null;
402
350
  }
403
351
  navigateToBookMeeting() {
@@ -515,12 +463,15 @@ class Trial4ContactUsComponent extends AppBaseComponent {
515
463
  canEditResources() {
516
464
  return this.canEditResourcesValue;
517
465
  }
466
+ ngOnDestroy() {
467
+ this.observer?.disconnect();
468
+ }
518
469
  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 }); }
519
- 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\"\n [class.content-loaded]=\"isHubspotReady\"\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 }); }
470
+ 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 }); }
520
471
  }
521
472
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Trial4ContactUsComponent, decorators: [{
522
473
  type: Component,
523
- 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\"\n [class.content-loaded]=\"isHubspotReady\"\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"] }]
474
+ 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"] }]
524
475
  }], 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: [{
525
476
  type: Inject,
526
477
  args: [DOCUMENT]