@ptcwebops/ptcw-design 2.9.1 → 2.9.2

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 (13) hide show
  1. package/dist/cjs/embedded-form_9.cjs.entry.js +57 -48
  2. package/dist/collection/components/organism-bundles/form/embedded-form/embedded-form.js +1 -1
  3. package/dist/collection/components/ptc-data-lookup/ptc-data-lookup.css +29 -0
  4. package/dist/collection/components/ptc-data-lookup/ptc-data-lookup.js +1 -0
  5. package/dist/collection/components/ptc-textfield/ptc-textfield.js +1 -1
  6. package/dist/collection/utils/elq-lib.js +53 -45
  7. package/dist/custom-elements/index.js +57 -48
  8. package/dist/esm/embedded-form_9.entry.js +57 -48
  9. package/dist/ptcw-design/{p-b8b59f02.entry.js → p-6faf3ced.entry.js} +10 -10
  10. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  11. package/dist/types/utils/elq-lib.d.ts +4 -0
  12. package/package.json +1 -1
  13. package/readme.md +1 -1
package/dist/cjs/embedded-form_9.cjs.entry.js CHANGED
@@ -99,7 +99,7 @@ const EmbeddedForm = class {
99
99
  }
100
100
  render() {
101
101
  const formClass = this.isSubmitted ? "ptc-form-roll-up" : "";
102
- return (index.h(index.Host, null, index.h("div", { class: "ptc-container ptc-section-standard flex-adjustments" }, index.h("div", { class: "form-wrapper ptc-embedded-form" }, index.h("max-width-container", { "max-width": "277", breakpoint: 480 }, index.h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" })), index.h("form", { onSubmit: event => this.handleSubmit(event), class: formClass }, index.h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", name: "firstname" }), index.h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", name: "lastname" }), index.h("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", name: "company-field" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", name: "email" }), index.h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", name: "country" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "USA")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Canada")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "China")))), index.h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", name: "phone" }), index.h("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", name: "inquiryreason", "field-id": "contact-inquiry" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), index.h("li", { class: "mdc-list-item", "data-value": "CAD" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), index.h("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), index.h("ptc-textfield", { "field-id": "self-reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", name: "howhearselfreport" }), index.h("ptc-textfield", { type: "hidden", "ptc-data-eloqua-name": "test", "input-value": "test" }), index.h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "policy1" }), index.h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; text-align:right;}" }, "Submit"))))));
102
+ return (index.h(index.Host, null, index.h("div", { class: "ptc-container ptc-section-standard flex-adjustments" }, index.h("div", { class: "form-wrapper ptc-embedded-form" }, index.h("max-width-container", { "max-width": "277", breakpoint: 480 }, index.h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" })), index.h("form", { onSubmit: event => this.handleSubmit(event), class: formClass }, index.h("div", { id: "not-me-link-id" }), index.h("div", { id: "not-me-additional-top", class: "not-me-additional-text" }), index.h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", name: "firstname" }), index.h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", name: "lastname" }), index.h("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", name: "company-field" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", name: "email" }), index.h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", name: "country" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "USA")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Canada")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "China")))), index.h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", name: "phone" }), index.h("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", name: "inquiryreason", "field-id": "contact-inquiry" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), index.h("li", { class: "mdc-list-item", "data-value": "CAD" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), index.h("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), index.h("ptc-textfield", { "field-id": "self-reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", name: "howhearselfreport" }), index.h("ptc-textfield", { type: "hidden", "ptc-data-eloqua-name": "test", "input-value": "test" }), index.h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "policy1" }), index.h("div", { id: "not-me-additional-bottom", class: "not-me-additional-text" }), index.h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; text-align:right;}" }, "Submit"))))));
103
103
  }
104
104
  get el() { return index.getElement(this); }
105
105
  };
@@ -203,7 +203,7 @@ class ElqLib {
203
203
  this.visitor_elq_id = null;
204
204
  this.field_mappings = [];
205
205
  this.callback_queue = [];
206
- //private fields_populated: boolean = false;
206
+ this.fields_populated = false;
207
207
  this.user_elq_email = '';
208
208
  this.user_elq_firstname = '';
209
209
  this.user_elq_lastname = '';
@@ -344,8 +344,8 @@ class ElqLib {
344
344
  // After processing the queue, update user details or perform other operations
345
345
  if (actionSucceeded) {
346
346
  this.update_user_details();
347
+ this.populate_mapped_fields();
347
348
  }
348
- //this.populate_mapped_fields();
349
349
  // ...additional code to handle the aftermath of callback processing...
350
350
  }
351
351
  lookup_visitor_by_cookie() {
@@ -406,39 +406,27 @@ class ElqLib {
406
406
  return false;
407
407
  }
408
408
  }
409
- // private populate_mapped_fields(): void {
410
- // console.log("MAPPING: Starting field mapping");
411
- // // Loop through all mappings
412
- // for (mapping_set in field_mappings) {
413
- // for (mapping_element in field_mappings[mapping_set]) {
414
- // var mapping_elq_field = field_mappings[mapping_set][mapping_element];
415
- // var element = document.getElementById(mapping_element);
416
- // var field_value = GetElqContentPersonalizationValue(mapping_elq_field);
417
- // // Check that field exists
418
- // if (element == null) {
419
- // log("MAPPING: Could not populate element '" + mapping_element + "' as it does not exist");
420
- // }
421
- // else if (element.value != '') {
422
- // log("MAPPING: Could not populate element '" + mapping_element + "' as it already contained a value");
423
- // }
424
- // else if (field_value == '') {
425
- // log("MAPPING: Could not populate element '" + mapping_element + "' as the Eloqua field '" + mapping_elq_field + "' contained no data");
426
- // }
427
- // else {
428
- // fields_populated = true;
429
- // element.value = field_value;
430
- // log("MAPPING: Mapped element '" + mapping_element + "' with Eloqua field '" + mapping_elq_field + "'");
431
- // }
432
- // }
433
- // }
434
- // console.log("MAPPING: Finished field mapping");
435
- // // Update notme link
436
- // //update_notme_link ();
437
- // }
409
+ populate_mapped_fields() {
410
+ console.log('MAPPING: Starting field mapping');
411
+ this.field_mappings.forEach(({ elementId, elqFieldName }) => {
412
+ const element = document.getElementById(elementId);
413
+ const fieldValue = window.GetElqContentPersonalizationValue(elqFieldName);
414
+ if (element && fieldValue) {
415
+ element.value = fieldValue;
416
+ element.style.display = 'none'; // Hide the field
417
+ this.fields_populated = true;
418
+ }
419
+ });
420
+ console.log('MAPPING: Finished ');
421
+ if (this.fields_populated) {
422
+ this.update_notme_link();
423
+ }
424
+ }
438
425
  update_user_details() {
439
426
  console.log('displaying user info...');
440
427
  if (window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email) !== '') {
441
- document.querySelectorAll('input[type=text], input[type=tel], input[name="phonenumber"], input[name="phonenumbertwo"], input[type=email], select, textarea, span.mdc-select__selected-text')
428
+ document
429
+ .querySelectorAll('input[type=text], input[type=tel], input[name="phonenumber"], input[name="phonenumbertwo"], input[type=email], select, textarea, span.mdc-select__selected-text')
442
430
  .forEach((element) => {
443
431
  if (element.tagName === 'SPAN') {
444
432
  const spanText = element;
@@ -517,19 +505,39 @@ class ElqLib {
517
505
  // var link = $('<a href="">' + message + '</a>').appendTo(notme_link_element).click(this.remove_user_details);
518
506
  // }
519
507
  // }
520
- // private remove_user_details(): void {
521
- // this.user_elq_email = '';
522
- // this.user_elq_firstname = '';
523
- // this.user_elq_lastname = '';
524
- // $('.' + this.params.notme_fields_class).val('');
525
- // $('#' + this.params.notme_link_id)
526
- // .find('a')
527
- // .remove();
528
- // //Flush out old user cookie
529
- // ElqLib._elqQ.push(['elqVisitorGuid', ' ']);
530
- // ElqLib._elqQ.push(['elqTrackPageView']);
531
- // //return false;
532
- // }
508
+ update_notme_link() {
509
+ // Assuming the user's first and last name are available from Eloqua fields
510
+ const firstName = window.GetElqContentPersonalizationValue('elq_field_visitor_firstname');
511
+ const lastName = window.GetElqContentPersonalizationValue('elq_field_visitor_lastname');
512
+ const notMeLinkElement = document.getElementById('not-me-link-id'); // Adjust ID as necessary
513
+ if (notMeLinkElement) {
514
+ let message = this.params.notme_message_noname;
515
+ if (firstName && lastName) {
516
+ //message = `Not ${firstName} ${lastName}? Click here.`;
517
+ message = this.params.notme_message.replace('{name}', `${firstName} ${lastName}`);
518
+ }
519
+ notMeLinkElement.innerHTML = `<a href="#" onclick="return false;">${message}</a>`;
520
+ notMeLinkElement.onclick = this.remove_user_details.bind(this);
521
+ }
522
+ }
523
+ remove_user_details() {
524
+ this.user_elq_email = '';
525
+ this.user_elq_firstname = '';
526
+ this.user_elq_lastname = '';
527
+ $('.' + this.params.notme_fields_class).val('');
528
+ $('#' + this.params.notme_link_id)
529
+ .find('a')
530
+ .remove();
531
+ //Flush out old user cookie
532
+ ElqLib._elqQ.push(['elqVisitorGuid', ' ']);
533
+ ElqLib._elqQ.push(['elqTrackPageView']);
534
+ return false;
535
+ }
536
+ // private remove_user_details(): boolean {
537
+ // // Clear user data and reset form fields
538
+ // // ... implementation ...
539
+ // return false; // To prevent default link action
540
+ // }
533
541
  // Private Method to load Eloqua Scripts
534
542
  async_load() {
535
543
  const scriptUrl = 'https://img.en25.com/i/elqCfg.min.js';
@@ -556,7 +564,7 @@ ElqLib._elqQ = window['_elqQ'] || [];
556
564
  // Static member initialization
557
565
  //ElqLib._elqQ = window['_elqQ'] || [];
558
566
 
559
- const ptcDataLookupCss = ":host{display:block}";
567
+ const ptcDataLookupCss = ":host{display:block}#not-me-link-id{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-medium);font-style:normal;font-weight:var(--ptc-font-weight-bold);line-height:normal;margin-bottom:var(--ptc-element-spacing-03)}#not-me-link-id a{color:var(--color-blue-07);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-medium);font-style:normal;font-weight:var(--ptc-font-weight-bold);line-height:normal;text-decoration-line:underline}.not-me-additional-text{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-medium);font-style:normal;font-weight:var(--ptc-font-weight-regular);line-height:normal;margin-bottom:var(--ptc-element-spacing-03)}";
560
568
 
561
569
  const PtcDataLookup = class {
562
570
  constructor(hostRef) {
@@ -578,6 +586,7 @@ const PtcDataLookup = class {
578
586
  }
579
587
  componentWillLoad() {
580
588
  this.initializeElqLib();
589
+ this.elqLib.add_field_mapping({ elementId: 'email-field', elqFieldName: 'C_EmailAddress' });
581
590
  }
582
591
  initializeElqLib() {
583
592
  this.elqLib = new ElqLib({
@@ -11313,7 +11322,7 @@ const PtcTextfield = class {
11313
11322
  this.mdcTextfield = mdcTextfield;
11314
11323
  } }, index.h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, index.h("span", { class: "mdc-notched-outline__leading" }), index.h("span", { class: "mdc-notched-outline__trailing" })), index.h("input", Object.assign({ ref: customInput => {
11315
11324
  this.customInput = customInput;
11316
- } }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null)))),
11325
+ }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null)))),
11317
11326
  index.h("div", { class: `mdc-text-field-helper-line
11318
11327
  ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, index.h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.name }, index.h("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { "clip-path": "url(#clip0_12_1424)" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), index.h("defs", null, index.h("clipPath", { id: "clip0_12_1424" }, index.h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.ptcMaxLength ? (index.h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
11319
11328
  ]) : (index.h("input", { type: "hidden", "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }))));
package/dist/collection/components/organism-bundles/form/embedded-form/embedded-form.js CHANGED
@@ -91,7 +91,7 @@ export class EmbeddedForm {
91
91
  }
92
92
  render() {
93
93
  const formClass = this.isSubmitted ? "ptc-form-roll-up" : "";
94
- return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard flex-adjustments" }, h("div", { class: "form-wrapper ptc-embedded-form" }, h("max-width-container", { "max-width": "277", breakpoint: 480 }, h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "small" })), h("form", { onSubmit: event => this.handleSubmit(event), class: formClass }, h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", name: "firstname" }), h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", name: "lastname" }), h("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", name: "company-field" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", name: "email" }), h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", name: "country" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "USA" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "USA")), h("li", { class: "mdc-list-item", "data-value": "Canada" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Canada")), h("li", { class: "mdc-list-item", "data-value": "China" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "China")))), h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", name: "phone" }), h("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", name: "inquiryreason", "field-id": "contact-inquiry" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), h("li", { class: "mdc-list-item", "data-value": "CAD" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), h("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), h("ptc-textfield", { "field-id": "self-reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", name: "howhearselfreport" }), h("ptc-textfield", { type: "hidden", "ptc-data-eloqua-name": "test", "input-value": "test" }), h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "policy1" }), h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; text-align:right;}" }, "Submit"))))));
94
+ return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard flex-adjustments" }, h("div", { class: "form-wrapper ptc-embedded-form" }, h("max-width-container", { "max-width": "277", breakpoint: 480 }, h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "small" })), h("form", { onSubmit: event => this.handleSubmit(event), class: formClass }, h("div", { id: "not-me-link-id" }), h("div", { id: "not-me-additional-top", class: "not-me-additional-text" }), h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", name: "firstname" }), h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", name: "lastname" }), h("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", name: "company-field" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", name: "email" }), h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", name: "country" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "USA" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "USA")), h("li", { class: "mdc-list-item", "data-value": "Canada" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Canada")), h("li", { class: "mdc-list-item", "data-value": "China" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "China")))), h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", name: "phone" }), h("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", name: "inquiryreason", "field-id": "contact-inquiry" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), h("li", { class: "mdc-list-item", "data-value": "CAD" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), h("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), h("ptc-textfield", { "field-id": "self-reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", name: "howhearselfreport" }), h("ptc-textfield", { type: "hidden", "ptc-data-eloqua-name": "test", "input-value": "test" }), h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "policy1" }), h("div", { id: "not-me-additional-bottom", class: "not-me-additional-text" }), h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; text-align:right;}" }, "Submit"))))));
95
95
  }
96
96
  static get is() { return "embedded-form"; }
97
97
  static get originalStyleUrls() {
package/dist/collection/components/ptc-data-lookup/ptc-data-lookup.css CHANGED
@@ -1,3 +1,32 @@
1
1
  :host {
2
2
  display: block;
3
+ }
4
+
5
+ #not-me-link-id {
6
+ color: var(--color-gray-10);
7
+ font-family: var(--ptc-font-latin);
8
+ font-size: var(--ptc-font-size-medium);
9
+ font-style: normal;
10
+ font-weight: var(--ptc-font-weight-bold);
11
+ line-height: normal;
12
+ margin-bottom: var(--ptc-element-spacing-03);
13
+ }
14
+ #not-me-link-id a {
15
+ color: var(--color-blue-07);
16
+ font-family: var(--ptc-font-latin);
17
+ font-size: var(--ptc-font-size-medium);
18
+ font-style: normal;
19
+ font-weight: var(--ptc-font-weight-bold);
20
+ line-height: normal;
21
+ text-decoration-line: underline;
22
+ }
23
+
24
+ .not-me-additional-text {
25
+ color: var(--color-gray-10);
26
+ font-family: var(--ptc-font-latin);
27
+ font-size: var(--ptc-font-size-medium);
28
+ font-style: normal;
29
+ font-weight: var(--ptc-font-weight-regular);
30
+ line-height: normal;
31
+ margin-bottom: var(--ptc-element-spacing-03);
3
32
  }
package/dist/collection/components/ptc-data-lookup/ptc-data-lookup.js CHANGED
@@ -19,6 +19,7 @@ export class PtcDataLookup {
19
19
  }
20
20
  componentWillLoad() {
21
21
  this.initializeElqLib();
22
+ this.elqLib.add_field_mapping({ elementId: 'email-field', elqFieldName: 'C_EmailAddress' });
22
23
  }
23
24
  initializeElqLib() {
24
25
  this.elqLib = new ElqLib({
package/dist/collection/components/ptc-textfield/ptc-textfield.js CHANGED
@@ -148,7 +148,7 @@ export class PtcTextfield {
148
148
  this.mdcTextfield = mdcTextfield;
149
149
  } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("input", Object.assign({ ref: customInput => {
150
150
  this.customInput = customInput;
151
- } }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null)))),
151
+ }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null)))),
152
152
  h("div", { class: `mdc-text-field-helper-line
153
153
  ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.name }, h("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
154
154
  ]) : (h("input", { type: "hidden", "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }))));
package/dist/collection/utils/elq-lib.js CHANGED
@@ -7,7 +7,7 @@ export class ElqLib {
7
7
  this.visitor_elq_id = null;
8
8
  this.field_mappings = [];
9
9
  this.callback_queue = [];
10
- //private fields_populated: boolean = false;
10
+ this.fields_populated = false;
11
11
  this.user_elq_email = '';
12
12
  this.user_elq_firstname = '';
13
13
  this.user_elq_lastname = '';
@@ -148,8 +148,8 @@ export class ElqLib {
148
148
  // After processing the queue, update user details or perform other operations
149
149
  if (actionSucceeded) {
150
150
  this.update_user_details();
151
+ this.populate_mapped_fields();
151
152
  }
152
- //this.populate_mapped_fields();
153
153
  // ...additional code to handle the aftermath of callback processing...
154
154
  }
155
155
  lookup_visitor_by_cookie() {
@@ -210,39 +210,27 @@ export class ElqLib {
210
210
  return false;
211
211
  }
212
212
  }
213
- // private populate_mapped_fields(): void {
214
- // console.log("MAPPING: Starting field mapping");
215
- // // Loop through all mappings
216
- // for (mapping_set in field_mappings) {
217
- // for (mapping_element in field_mappings[mapping_set]) {
218
- // var mapping_elq_field = field_mappings[mapping_set][mapping_element];
219
- // var element = document.getElementById(mapping_element);
220
- // var field_value = GetElqContentPersonalizationValue(mapping_elq_field);
221
- // // Check that field exists
222
- // if (element == null) {
223
- // log("MAPPING: Could not populate element '" + mapping_element + "' as it does not exist");
224
- // }
225
- // else if (element.value != '') {
226
- // log("MAPPING: Could not populate element '" + mapping_element + "' as it already contained a value");
227
- // }
228
- // else if (field_value == '') {
229
- // log("MAPPING: Could not populate element '" + mapping_element + "' as the Eloqua field '" + mapping_elq_field + "' contained no data");
230
- // }
231
- // else {
232
- // fields_populated = true;
233
- // element.value = field_value;
234
- // log("MAPPING: Mapped element '" + mapping_element + "' with Eloqua field '" + mapping_elq_field + "'");
235
- // }
236
- // }
237
- // }
238
- // console.log("MAPPING: Finished field mapping");
239
- // // Update notme link
240
- // //update_notme_link ();
241
- // }
213
+ populate_mapped_fields() {
214
+ console.log('MAPPING: Starting field mapping');
215
+ this.field_mappings.forEach(({ elementId, elqFieldName }) => {
216
+ const element = document.getElementById(elementId);
217
+ const fieldValue = window.GetElqContentPersonalizationValue(elqFieldName);
218
+ if (element && fieldValue) {
219
+ element.value = fieldValue;
220
+ element.style.display = 'none'; // Hide the field
221
+ this.fields_populated = true;
222
+ }
223
+ });
224
+ console.log('MAPPING: Finished ');
225
+ if (this.fields_populated) {
226
+ this.update_notme_link();
227
+ }
228
+ }
242
229
  update_user_details() {
243
230
  console.log('displaying user info...');
244
231
  if (window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email) !== '') {
245
- document.querySelectorAll('input[type=text], input[type=tel], input[name="phonenumber"], input[name="phonenumbertwo"], input[type=email], select, textarea, span.mdc-select__selected-text')
232
+ document
233
+ .querySelectorAll('input[type=text], input[type=tel], input[name="phonenumber"], input[name="phonenumbertwo"], input[type=email], select, textarea, span.mdc-select__selected-text')
246
234
  .forEach((element) => {
247
235
  if (element.tagName === 'SPAN') {
248
236
  const spanText = element;
@@ -321,19 +309,39 @@ export class ElqLib {
321
309
  // var link = $('<a href="">' + message + '</a>').appendTo(notme_link_element).click(this.remove_user_details);
322
310
  // }
323
311
  // }
324
- // private remove_user_details(): void {
325
- // this.user_elq_email = '';
326
- // this.user_elq_firstname = '';
327
- // this.user_elq_lastname = '';
328
- // $('.' + this.params.notme_fields_class).val('');
329
- // $('#' + this.params.notme_link_id)
330
- // .find('a')
331
- // .remove();
332
- // //Flush out old user cookie
333
- // ElqLib._elqQ.push(['elqVisitorGuid', ' ']);
334
- // ElqLib._elqQ.push(['elqTrackPageView']);
335
- // //return false;
336
- // }
312
+ update_notme_link() {
313
+ // Assuming the user's first and last name are available from Eloqua fields
314
+ const firstName = window.GetElqContentPersonalizationValue('elq_field_visitor_firstname');
315
+ const lastName = window.GetElqContentPersonalizationValue('elq_field_visitor_lastname');
316
+ const notMeLinkElement = document.getElementById('not-me-link-id'); // Adjust ID as necessary
317
+ if (notMeLinkElement) {
318
+ let message = this.params.notme_message_noname;
319
+ if (firstName && lastName) {
320
+ //message = `Not ${firstName} ${lastName}? Click here.`;
321
+ message = this.params.notme_message.replace('{name}', `${firstName} ${lastName}`);
322
+ }
323
+ notMeLinkElement.innerHTML = `<a href="#" onclick="return false;">${message}</a>`;
324
+ notMeLinkElement.onclick = this.remove_user_details.bind(this);
325
+ }
326
+ }
327
+ remove_user_details() {
328
+ this.user_elq_email = '';
329
+ this.user_elq_firstname = '';
330
+ this.user_elq_lastname = '';
331
+ $('.' + this.params.notme_fields_class).val('');
332
+ $('#' + this.params.notme_link_id)
333
+ .find('a')
334
+ .remove();
335
+ //Flush out old user cookie
336
+ ElqLib._elqQ.push(['elqVisitorGuid', ' ']);
337
+ ElqLib._elqQ.push(['elqTrackPageView']);
338
+ return false;
339
+ }
340
+ // private remove_user_details(): boolean {
341
+ // // Clear user data and reset form fields
342
+ // // ... implementation ...
343
+ // return false; // To prevent default link action
344
+ // }
337
345
  // Private Method to load Eloqua Scripts
338
346
  async_load() {
339
347
  const scriptUrl = 'https://img.en25.com/i/elqCfg.min.js';
package/dist/custom-elements/index.js CHANGED
@@ -475,7 +475,7 @@ const EmbeddedForm$1 = class extends HTMLElement$1 {
475
475
  }
476
476
  render() {
477
477
  const formClass = this.isSubmitted ? "ptc-form-roll-up" : "";
478
- return (h$1(Host, null, h$1("div", { class: "ptc-container ptc-section-standard flex-adjustments" }, h$1("div", { class: "form-wrapper ptc-embedded-form" }, h$1("max-width-container", { "max-width": "277", breakpoint: 480 }, h$1("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), h$1("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h$1("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h$1("ptc-spacer", { breakpoint: "small", size: "small" }), h$1("ptc-spacer", { breakpoint: "small", size: "small" })), h$1("form", { onSubmit: event => this.handleSubmit(event), class: formClass }, h$1("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", name: "firstname" }), h$1("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", name: "lastname" }), h$1("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", name: "company-field" }), h$1("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", name: "email" }), h$1("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", name: "country" }, h$1("ul", { class: "mdc-list" }, h$1("li", { class: "mdc-list-item", "data-value": "" }, h$1("span", { class: "mdc-list-item__ripple" })), h$1("li", { class: "mdc-list-item", "data-value": "USA" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "USA")), h$1("li", { class: "mdc-list-item", "data-value": "Canada" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Canada")), h$1("li", { class: "mdc-list-item", "data-value": "China" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "China")))), h$1("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", name: "phone" }), h$1("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", name: "inquiryreason", "field-id": "contact-inquiry" }, h$1("ul", { class: "mdc-list" }, h$1("li", { class: "mdc-list-item", "data-value": "" }, h$1("span", { class: "mdc-list-item__ripple" })), h$1("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), h$1("li", { class: "mdc-list-item", "data-value": "CAD" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), h$1("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), h$1("ptc-textfield", { "field-id": "self-reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", name: "howhearselfreport" }), h$1("ptc-textfield", { type: "hidden", "ptc-data-eloqua-name": "test", "input-value": "test" }), h$1("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "policy1" }), h$1("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; text-align:right;}" }, "Submit"))))));
478
+ return (h$1(Host, null, h$1("div", { class: "ptc-container ptc-section-standard flex-adjustments" }, h$1("div", { class: "form-wrapper ptc-embedded-form" }, h$1("max-width-container", { "max-width": "277", breakpoint: 480 }, h$1("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), h$1("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h$1("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h$1("ptc-spacer", { breakpoint: "small", size: "small" }), h$1("ptc-spacer", { breakpoint: "small", size: "small" })), h$1("form", { onSubmit: event => this.handleSubmit(event), class: formClass }, h$1("div", { id: "not-me-link-id" }), h$1("div", { id: "not-me-additional-top", class: "not-me-additional-text" }), h$1("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", name: "firstname" }), h$1("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", name: "lastname" }), h$1("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", name: "company-field" }), h$1("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", name: "email" }), h$1("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", name: "country" }, h$1("ul", { class: "mdc-list" }, h$1("li", { class: "mdc-list-item", "data-value": "" }, h$1("span", { class: "mdc-list-item__ripple" })), h$1("li", { class: "mdc-list-item", "data-value": "USA" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "USA")), h$1("li", { class: "mdc-list-item", "data-value": "Canada" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Canada")), h$1("li", { class: "mdc-list-item", "data-value": "China" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "China")))), h$1("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", name: "phone" }), h$1("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", name: "inquiryreason", "field-id": "contact-inquiry" }, h$1("ul", { class: "mdc-list" }, h$1("li", { class: "mdc-list-item", "data-value": "" }, h$1("span", { class: "mdc-list-item__ripple" })), h$1("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), h$1("li", { class: "mdc-list-item", "data-value": "CAD" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), h$1("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), h$1("ptc-textfield", { "field-id": "self-reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", name: "howhearselfreport" }), h$1("ptc-textfield", { type: "hidden", "ptc-data-eloqua-name": "test", "input-value": "test" }), h$1("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "policy1" }), h$1("div", { id: "not-me-additional-bottom", class: "not-me-additional-text" }), h$1("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; text-align:right;}" }, "Submit"))))));
479
479
  }
480
480
  get el() { return this; }
481
481
  static get style() { return embeddedFormCss; }
@@ -8041,7 +8041,7 @@ class ElqLib {
8041
8041
  this.visitor_elq_id = null;
8042
8042
  this.field_mappings = [];
8043
8043
  this.callback_queue = [];
8044
- //private fields_populated: boolean = false;
8044
+ this.fields_populated = false;
8045
8045
  this.user_elq_email = '';
8046
8046
  this.user_elq_firstname = '';
8047
8047
  this.user_elq_lastname = '';
@@ -8182,8 +8182,8 @@ class ElqLib {
8182
8182
  // After processing the queue, update user details or perform other operations
8183
8183
  if (actionSucceeded) {
8184
8184
  this.update_user_details();
8185
+ this.populate_mapped_fields();
8185
8186
  }
8186
- //this.populate_mapped_fields();
8187
8187
  // ...additional code to handle the aftermath of callback processing...
8188
8188
  }
8189
8189
  lookup_visitor_by_cookie() {
@@ -8244,39 +8244,27 @@ class ElqLib {
8244
8244
  return false;
8245
8245
  }
8246
8246
  }
8247
- // private populate_mapped_fields(): void {
8248
- // console.log("MAPPING: Starting field mapping");
8249
- // // Loop through all mappings
8250
- // for (mapping_set in field_mappings) {
8251
- // for (mapping_element in field_mappings[mapping_set]) {
8252
- // var mapping_elq_field = field_mappings[mapping_set][mapping_element];
8253
- // var element = document.getElementById(mapping_element);
8254
- // var field_value = GetElqContentPersonalizationValue(mapping_elq_field);
8255
- // // Check that field exists
8256
- // if (element == null) {
8257
- // log("MAPPING: Could not populate element '" + mapping_element + "' as it does not exist");
8258
- // }
8259
- // else if (element.value != '') {
8260
- // log("MAPPING: Could not populate element '" + mapping_element + "' as it already contained a value");
8261
- // }
8262
- // else if (field_value == '') {
8263
- // log("MAPPING: Could not populate element '" + mapping_element + "' as the Eloqua field '" + mapping_elq_field + "' contained no data");
8264
- // }
8265
- // else {
8266
- // fields_populated = true;
8267
- // element.value = field_value;
8268
- // log("MAPPING: Mapped element '" + mapping_element + "' with Eloqua field '" + mapping_elq_field + "'");
8269
- // }
8270
- // }
8271
- // }
8272
- // console.log("MAPPING: Finished field mapping");
8273
- // // Update notme link
8274
- // //update_notme_link ();
8275
- // }
8247
+ populate_mapped_fields() {
8248
+ console.log('MAPPING: Starting field mapping');
8249
+ this.field_mappings.forEach(({ elementId, elqFieldName }) => {
8250
+ const element = document.getElementById(elementId);
8251
+ const fieldValue = window.GetElqContentPersonalizationValue(elqFieldName);
8252
+ if (element && fieldValue) {
8253
+ element.value = fieldValue;
8254
+ element.style.display = 'none'; // Hide the field
8255
+ this.fields_populated = true;
8256
+ }
8257
+ });
8258
+ console.log('MAPPING: Finished ');
8259
+ if (this.fields_populated) {
8260
+ this.update_notme_link();
8261
+ }
8262
+ }
8276
8263
  update_user_details() {
8277
8264
  console.log('displaying user info...');
8278
8265
  if (window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email) !== '') {
8279
- document.querySelectorAll('input[type=text], input[type=tel], input[name="phonenumber"], input[name="phonenumbertwo"], input[type=email], select, textarea, span.mdc-select__selected-text')
8266
+ document
8267
+ .querySelectorAll('input[type=text], input[type=tel], input[name="phonenumber"], input[name="phonenumbertwo"], input[type=email], select, textarea, span.mdc-select__selected-text')
8280
8268
  .forEach((element) => {
8281
8269
  if (element.tagName === 'SPAN') {
8282
8270
  const spanText = element;
@@ -8355,19 +8343,39 @@ class ElqLib {
8355
8343
  // var link = $('<a href="">' + message + '</a>').appendTo(notme_link_element).click(this.remove_user_details);
8356
8344
  // }
8357
8345
  // }
8358
- // private remove_user_details(): void {
8359
- // this.user_elq_email = '';
8360
- // this.user_elq_firstname = '';
8361
- // this.user_elq_lastname = '';
8362
- // $('.' + this.params.notme_fields_class).val('');
8363
- // $('#' + this.params.notme_link_id)
8364
- // .find('a')
8365
- // .remove();
8366
- // //Flush out old user cookie
8367
- // ElqLib._elqQ.push(['elqVisitorGuid', ' ']);
8368
- // ElqLib._elqQ.push(['elqTrackPageView']);
8369
- // //return false;
8370
- // }
8346
+ update_notme_link() {
8347
+ // Assuming the user's first and last name are available from Eloqua fields
8348
+ const firstName = window.GetElqContentPersonalizationValue('elq_field_visitor_firstname');
8349
+ const lastName = window.GetElqContentPersonalizationValue('elq_field_visitor_lastname');
8350
+ const notMeLinkElement = document.getElementById('not-me-link-id'); // Adjust ID as necessary
8351
+ if (notMeLinkElement) {
8352
+ let message = this.params.notme_message_noname;
8353
+ if (firstName && lastName) {
8354
+ //message = `Not ${firstName} ${lastName}? Click here.`;
8355
+ message = this.params.notme_message.replace('{name}', `${firstName} ${lastName}`);
8356
+ }
8357
+ notMeLinkElement.innerHTML = `<a href="#" onclick="return false;">${message}</a>`;
8358
+ notMeLinkElement.onclick = this.remove_user_details.bind(this);
8359
+ }
8360
+ }
8361
+ remove_user_details() {
8362
+ this.user_elq_email = '';
8363
+ this.user_elq_firstname = '';
8364
+ this.user_elq_lastname = '';
8365
+ $('.' + this.params.notme_fields_class).val('');
8366
+ $('#' + this.params.notme_link_id)
8367
+ .find('a')
8368
+ .remove();
8369
+ //Flush out old user cookie
8370
+ ElqLib._elqQ.push(['elqVisitorGuid', ' ']);
8371
+ ElqLib._elqQ.push(['elqTrackPageView']);
8372
+ return false;
8373
+ }
8374
+ // private remove_user_details(): boolean {
8375
+ // // Clear user data and reset form fields
8376
+ // // ... implementation ...
8377
+ // return false; // To prevent default link action
8378
+ // }
8371
8379
  // Private Method to load Eloqua Scripts
8372
8380
  async_load() {
8373
8381
  const scriptUrl = 'https://img.en25.com/i/elqCfg.min.js';
@@ -8394,7 +8402,7 @@ ElqLib._elqQ = window['_elqQ'] || [];
8394
8402
  // Static member initialization
8395
8403
  //ElqLib._elqQ = window['_elqQ'] || [];
8396
8404
 
8397
- const ptcDataLookupCss = ":host{display:block}";
8405
+ const ptcDataLookupCss = ":host{display:block}#not-me-link-id{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-medium);font-style:normal;font-weight:var(--ptc-font-weight-bold);line-height:normal;margin-bottom:var(--ptc-element-spacing-03)}#not-me-link-id a{color:var(--color-blue-07);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-medium);font-style:normal;font-weight:var(--ptc-font-weight-bold);line-height:normal;text-decoration-line:underline}.not-me-additional-text{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-medium);font-style:normal;font-weight:var(--ptc-font-weight-regular);line-height:normal;margin-bottom:var(--ptc-element-spacing-03)}";
8398
8406
 
8399
8407
  const PtcDataLookup$1 = class extends HTMLElement$1 {
8400
8408
  constructor() {
@@ -8417,6 +8425,7 @@ const PtcDataLookup$1 = class extends HTMLElement$1 {
8417
8425
  }
8418
8426
  componentWillLoad() {
8419
8427
  this.initializeElqLib();
8428
+ this.elqLib.add_field_mapping({ elementId: 'email-field', elqFieldName: 'C_EmailAddress' });
8420
8429
  }
8421
8430
  initializeElqLib() {
8422
8431
  this.elqLib = new ElqLib({
@@ -24848,7 +24857,7 @@ const PtcTextfield$1 = class extends HTMLElement$1 {
24848
24857
  this.mdcTextfield = mdcTextfield;
24849
24858
  } }, h$1("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h$1("span", { class: "mdc-notched-outline__leading" }), h$1("span", { class: "mdc-notched-outline__trailing" })), h$1("input", Object.assign({ ref: customInput => {
24850
24859
  this.customInput = customInput;
24851
- } }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null)))),
24860
+ }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null)))),
24852
24861
  h$1("div", { class: `mdc-text-field-helper-line
24853
24862
  ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h$1("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.name }, h$1("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h$1("g", { "clip-path": "url(#clip0_12_1424)" }, h$1("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h$1("defs", null, h$1("clipPath", { id: "clip0_12_1424" }, h$1("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.ptcMaxLength ? (h$1("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
24854
24863
  ]) : (h$1("input", { type: "hidden", "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }))));