@ptcwebops/ptcw-design 4.1.8 → 4.2.0

package/dist/collection/components/organism-bundles/form/generic-form/generic-form-test.css

@@ -0,0 +1,84 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card {
+  word-break: break-word;
+  hyphens: manual;
+  -webkit-hyphens: manual;
+  -moz-hyphens: manual;
+  -ms-hyphens: manual;
+}
+@supports (hyphenate-limit-chars: 12 3 3) {
+  h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    /* For Safari */
+    -webkit-hyphenate-limit-after: 3;
+    /* For Safari */
+    hyphenate-limit-chars: 12 3 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-last: always;
+    hyphenate-limit-zone: 6%;
+    -webkit-hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+    -webkit-hyphenate-limit-chars: 12 3 3;
+    -webkit-hyphenate-limit-lines: 2;
+    -moz-hyphens: auto;
+    -moz-hyphenate-limit-chars: 12 3 3;
+    -moz-hyphenate-limit-lines: 2;
+    -ms-hyphens: auto;
+    -ms-hyphenate-limit-chars: 12 3 3;
+    -ms-hyphenate-limit-lines: 2;
+  }
+}
+
+:host {
+  display: block;
+}
+
+.form-wrapper {
+  width: 337px;
+  display: flex;
+  border-radius: 3px;
+  background: #FFF;
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 0px;
+}
+.form-wrapper > form {
+  max-width: 277px;
+}
+.form-wrapper > ptc-button {
+  align-items: center;
+}
+.form-wrapper .ptc-label {
+  display: block;
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-bold);
+  line-height: normal;
+  margin-bottom: var(--ptc-element-spacing-04);
+  position: relative;
+  z-index: 1;
+  color: var(--color-gray-13);
+}

package/dist/collection/components/organism-bundles/form/generic-form/generic-form-test.js

@@ -0,0 +1,94 @@
+import { Host, h } from '@stencil/core';
+export class GenericForm {
+  constructor() {
+    this.formData = {
+      email: '',
+      firstName: '',
+      lastName: '',
+      company: '',
+      country: '',
+      phone: '',
+      inquiryReason: '',
+      howhearselfreport: '',
+      policyChecked: false,
+    };
+  }
+  // private countryEle: HTMLPtcSelectElement;
+  // private inquiryreasonEle: HTMLPtcTextfieldElement;
+  // private howhearselfreport: HTMLPtcTextfieldElement;
+  componentDidLoad() {
+    this.formButton = this.el.querySelector('.form-submit');
+    this.formButton.addEventListener('click', this.handleSubmit.bind(this));
+    //get Email
+    this.emailEle = this.el.querySelector('ptc-textfield[field-id="contact-email"]');
+    this.firstNameEle = this.el.querySelector('ptc-textfield[field-id="contact-firstname"]');
+    this.lastNameEle = this.el.querySelector('ptc-textfield[field-id="contact-lastname"]');
+    this.companyEle = this.el.querySelector('ptc-textfield[field-id="company"]');
+    this.phoneEle = this.el.querySelector('ptc-textfield[field-id="contact-phone"]');
+    // this.countryEle = this.el.querySelector('ptc-select[field-id="contact-country"]')
+    // this.inquiryreasonEle = this.el.querySelector('ptc-textfield[field-id="contact-inquiry"]')
+    // this.howhearselfreport = this.el.querySelector('ptc-textfield[field-id="self-reporting"]')
+  }
+  handleInputChange(field, value) {
+    this.formData = Object.assign(Object.assign({}, this.formData), { [field]: value });
+  }
+  handleSubmit(event) {
+    event.preventDefault();
+    this.formData.email = this.emailEle.inputValue;
+    this.formData.firstName = this.firstNameEle.inputValue;
+    this.formData.lastName = this.lastNameEle.inputValue;
+    this.formData.company = this.companyEle.inputValue;
+    this.formData.phone = this.phoneEle.inputValue;
+    // this.formData.country = this.countryEle.inputValue;
+    // this.formData.inquiryReason= this.inquiryreasonEle.inputValue;
+    // this.formData.howhearselfreport = this.howhearselfreport.inputValue;
+    // console.log("get form Data: " + this.formData.email)
+    if (this.isValid()) {
+      const formSubmitEvent = new CustomEvent('formSubmit', {
+        detail: this.formData,
+        bubbles: true,
+      });
+      this.el.dispatchEvent(formSubmitEvent);
+      console.log('Form Submitted: ' + this.formData);
+    }
+    else {
+      console.log('Form validation failed');
+      console.log('Form Submitted: ' + this.formData.email, this.formData.firstName, this.formData.lastName, this.formData.company, this.formData.phone);
+    }
+  }
+  isValid() {
+    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
+    const invalidLength = document.querySelectorAll('.invalid-field').length;
+    // console.log('invalid fields length: ' + invalidLength), check the select field
+    return (email !== '' &&
+      phone !== '' &&
+      firstName !== '' &&
+      lastName !== '' &&
+      company !== '' &&
+      country !== '' &&
+      inquiryReason !== '' &&
+      howhearselfreport != '' &&
+      policyChecked &&
+      invalidLength === 0);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, h("div", { class: "form-wrapper" }, 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) }, h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "alert-text": "Minimum Age Required", "alert-text-content": "If you are under the age of 14 years old, you must use your parent/guardian email address.", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), h("ptc-textfield", { "field-id": "confirm-email", "label-text": "Confirm your Email*", type: "email", "ptc-data-eloqua-name": "emailconfirmation", "field-name": "confirm-email", "custom-validation": "Email addresses must match." }), h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), h("ptc-textfield", { "field-id": "contact-city", "label-text": "City*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), h("ptc-textfield", { "field-id": "contact-zipcode", "label-text": "Zip Code*", type: "text", "ptc-data-eloqua-name": "C_Zip_Postal", "field-name": "zipcode-field" }), h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-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-city", "label-text": "Purpose of use*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), h("ptc-form-checkbox", { label: "I acknowledge that my personal details will be processed in accordance with PTC\u2019s privacy policy and that they may be shared with PTC Inc\u2019s subsidiaries for\r\n               the promotion of PTC\u2019s products and associated services. ", "checkbox-id": "test" }), h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; float: right; width: fit-content;}" }, "Submit"))))));
+  }
+  static get is() { return "generic-form"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["generic-form-test.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["generic-form-test.css"]
+    };
+  }
+  static get states() {
+    return {
+      "formData": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-accordion/ptc-accordion.css

@@ -59,4 +59,32 @@ ptc-link, ptc-square-card {
       - default: 100vh
   */
   --ptc-accordion-item-body-max-height: 100vh;
+}
+:host .sort-btn-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 12px 0;
+}
+:host .sort-btn-wrap button {
+  padding: 10px;
+  font-size: 16px;
+  font-weight: 500;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+:host .sort-btn-wrap button span {
+  display: flex;
+  margin-right: 8px;
+  align-items: center;
+}
+:host .sort-btn-wrap button:first-child {
+  margin-right: 8px;
+}
+
+:host(.acc-parent-border) ::slotted(ptc-accordion-item:first-child) {
+  border-top: 1px solid var(--color-gray-03);
 }

package/dist/collection/components/ptc-accordion/ptc-accordion.js

@@ -1,11 +1,14 @@
 import { Host, h } from '@stencil/core';
+import expand from '../../media/svg-imgs/expand.svg';
+import collapse from '../../media/svg-imgs/collapse.svg';
 export class PtcAccordion {
   constructor() {
     this.multiple = false;
     this.theme = "standard";
+    this.isParent = false;
   }
   componentWillLoad() {
-    this.items = this.el.querySelectorAll(':scope > ptc-accordion-item');
+    this.items = this.el.querySelectorAll('ptc-accordion-item');
     this.items.forEach((item) => {
       item.setAttribute("theme", this.theme);
     });
@@ -16,6 +19,9 @@ export class PtcAccordion {
       }
       this.closeNonActive();
     }
+    if (this.el.classList.contains('parent-accordion')) {
+      this.isParent = true;
+    }
   }
   openHandler(e) {
     e.stopPropagation();
@@ -32,8 +38,19 @@ export class PtcAccordion {
       }
     });
   }
+  expandAllItems() {
+    this.items.forEach(item => {
+      item.open();
+    });
+  }
+  closeAllItems() {
+    this.items.forEach(item => {
+      item.close();
+    });
+  }
   render() {
-    return (h(Host, null, h("slot", null)));
+    return (h(Host, { class: `${this.isParent && this.multiple ? 'acc-parent-border' : ''}` }, (this.isParent && this.multiple) &&
+      h("div", { class: 'sort-btn-wrap' }, h("button", { onClick: () => { this.expandAllItems(); } }, " ", h("span", { innerHTML: expand }), " Expand All"), h("button", { onClick: () => { this.closeAllItems(); } }, h("span", { innerHTML: collapse }), "Collapse All")), h("slot", null)));
   }
   static get is() { return "ptc-accordion"; }
   static get encapsulation() { return "shadow"; }
@@ -84,6 +101,24 @@ export class PtcAccordion {
         "attribute": "theme",
         "reflect": false,
         "defaultValue": "\"standard\""
+      },
+      "isParent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-parent",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ptc-data-lookup/ptc-data-lookup.js

@@ -87,6 +87,7 @@ export class PtcDataLookup {
   async performDataLookup() {
     if (this.isInitialized) {
       this.elqLib.user_elq_email = this.getCookie('elq-uid');
+      console.log("elqlib.user_elq_email: " + this.elqLib.user_elq_email);
       this.elqLib.find_eloqua_contact();
     }
   }

package/dist/collection/components/ptc-media-card/ptc-media-card.css

@@ -131,4 +131,73 @@ ptc-link, ptc-square-card {
 :host(.bureau-card) {
   height: 100%;
   position: relative;
+}
+
+:host(.case-study-icon) {
+  width: 296px;
+}
+:host(.case-study-icon) ::slotted([slot=seo-content]) {
+  display: none;
+}
+:host(.case-study-icon) .case-study-img-anchor {
+  position: relative;
+  width: 296px;
+  height: 396px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+:host(.case-study-icon) .case-study-img-anchor .case-study-bg-img {
+  display: flex;
+  width: 296px;
+  height: 396px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  object-fit: cover;
+  position: absolute;
+  z-index: 1;
+}
+:host(.case-study-icon) .case-study-img-anchor .after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  z-index: 2;
+  background: rgba(0, 0, 0, 0.5);
+}
+:host(.case-study-icon) .case-study-img-anchor .case-study-icon-img {
+  position: absolute;
+  z-index: 3;
+  width: 92px;
+  height: 42px;
+  border-radius: 4px;
+  background: #FFF;
+  padding: 24px;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.24);
+}
+:host(.case-study-icon) .case-study-img-anchor:hover .after {
+  display: block;
+  background: rgba(0, 0, 0, 0.07);
+}
+:host(.case-study-icon) .case-study-img-anchor:hover .case-study-icon-img {
+  width: 96px;
+  height: 46px;
+}
+
+@media (min-width: 768px) {
+  :host(.case-study-icon) {
+    width: 373px;
+  }
+  :host(.case-study-icon) .case-study-img-anchor {
+    width: 373px;
+    height: 500px;
+  }
+  :host(.case-study-icon) .case-study-img-anchor .case-study-bg-img {
+    width: 373px;
+    height: 500px;
+  }
 }

package/dist/collection/components/ptc-media-card/ptc-media-card.js

@@ -16,6 +16,7 @@ export class PtcMediaCard {
     this.headingTransform = 'none';
     this.category = undefined;
     this.ariaLabel = undefined;
+    this.iconImage = undefined;
     this.isHovered = false;
   }
   WatchStateHandler(newValue) {
@@ -39,14 +40,17 @@ export class PtcMediaCard {
   }
   render() {
     const Tag = !!this.cardHref ? 'a' : 'div';
-    const isVideoUrl = getFileExtension(this.hoverBackgroundImage) === '.mp4' || this.hoverBackgroundImage.includes(".mp4") ? true : false;
+    const isVideoUrl = this.hoverBackgroundImage ? (getFileExtension(this.hoverBackgroundImage) === '.mp4' || this.hoverBackgroundImage.includes(".mp4") ? true : false) : false;
     //console.log("isVideoUrl: " + isVideoUrl + " hoverBackgroundImage: " + this.hoverBackgroundImage);
     const classMap = this.getCssClassMap();
     return (h(Host, { class: classMap, onmouseenter: () => (this.isHovered = true), onmouseleave: () => (this.isHovered = false),
       // {...(!isVideoUrl
       //   ? { ...{ style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } } }
       //   : null)}
-      style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } }, h("slot", { name: "seo-content" }), h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())));
+      style: this.cardType != "case-study-icon" ?
+        ((this.isHovered && this.hoverBackgroundImage) ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` }) : {} }, h("slot", { name: "seo-content" }), this.cardType != "case-study-icon" ?
+      (h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())) : null, this.cardType === "case-study-icon" ? (h("a", { class: "case-study-img-anchor", target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, h("img", { class: "case-study-bg-img", src: this.activeBackgroundImage }), h("div", { class: "after" }), h("img", { class: "case-study-icon-img", src: this.iconImage })))
+      : null));
   }
   getCssClassMap() {
     return {
@@ -71,8 +75,8 @@ export class PtcMediaCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'media-card' | 'bureau-card'",
-          "resolved": "\"bureau-card\" | \"media-card\"",
+          "original": "'media-card' | 'bureau-card' | 'case-study-icon'",
+          "resolved": "\"bureau-card\" | \"case-study-icon\" | \"media-card\"",
           "references": {}
         },
         "required": false,
@@ -241,6 +245,23 @@ export class PtcMediaCard {
         },
         "attribute": "aria-label",
         "reflect": false
+      },
+      "iconImage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon Imgae"
+        },
+        "attribute": "icon-image",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css

@@ -117,7 +117,7 @@ ptc-link, ptc-square-card {
 
 @media (min-width: 1980px) {
   .preload-min-height {
-    min-height: 80vh;
+    min-height: 60vh;
   }
 }
 .cards-preload-min-height {

package/dist/collection/components/ptc-related-card-rail/ptc-related-card-rail.js

@@ -123,11 +123,13 @@ export class PtcRelatedCardRail {
         let cardData = {
           image: undefined,
           text: undefined,
-          href: undefined
+          href: undefined,
+          altText: undefined
         };
         let cardImage = card.querySelector('img');
         let cardLink = card.querySelector('a');
         cardData.image = cardImage.getAttribute('src');
+        cardData.altText = cardImage.getAttribute('alt');
         cardData.text = cardLink.innerText;
         cardData.href = cardLink.getAttribute('href');
         this.data.push(cardData);
@@ -143,7 +145,7 @@ export class PtcRelatedCardRail {
   }
   render() {
     return (this.closed ? null :
-      h(Host, null, h("div", { class: "card-rail-container" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Read More Case Studies")), h("div", { class: "card-rail-close", onClick: () => { this.closed = true; } }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map(item => h("div", { class: "content", onClick: () => { window.open(item.href); } }, h("div", { class: "content-image" }, h("img", { alt: "", src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
+      h(Host, null, h("div", { class: "card-rail-container" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Read More Case Studies")), h("div", { class: "card-rail-close", onClick: () => { this.closed = true; } }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map(item => h("div", { class: "content", onClick: () => { window.open(item.href); } }, h("div", { class: "content-image" }, h("img", { alt: item.altText, src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
   }
   static get is() { return "ptc-related-card-rail"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/media/svg-imgs/collapse.svg

@@ -0,0 +1,8 @@
+<svg width="12" height="24" viewBox="0 0 12 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.8764 4.2994C11.3414 3.63673 10.8674 2.72498 10.0578 2.72498H1.91996C1.11108 2.72498 0.636893 3.63539 1.10056 4.2982L5.16313 10.1055C5.56085 10.674 6.40253 10.6746 6.80109 10.1067L10.8764 4.2994Z"
+    fill="#00890B" />
+  <path
+    d="M5.20045 14.0706C5.60047 13.5381 6.39952 13.5381 6.79955 14.0706L10.7977 19.3931C11.2928 20.0523 10.8225 20.9937 9.99812 20.9937H2.00188C1.17749 20.9937 0.707199 20.0523 1.20233 19.3931L5.20045 14.0706Z"
+    fill="#00890B" />
+</svg>

package/dist/collection/media/svg-imgs/expand.svg

@@ -0,0 +1,8 @@
+<svg width="12" height="24" viewBox="0 0 12 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M5.20045 3.07063C5.60047 2.53809 6.39952 2.53809 6.79955 3.07063L10.7977 8.39312C11.2928 9.05226 10.8225 9.99373 9.99812 9.99373H2.00188C1.17749 9.99373 0.707199 9.05227 1.20233 8.39313L5.20045 3.07063Z"
+    fill="#00890B" />
+  <path
+    d="M10.8764 15.2994C11.3414 14.6367 10.8674 13.725 10.0578 13.725H1.91996C1.11108 13.725 0.636893 14.6354 1.10056 15.2982L5.16313 21.1055C5.56085 21.674 6.40253 21.6746 6.80109 21.1067L10.8764 15.2994Z"
+    fill="#00890B" />
+</svg>

package/dist/collection/utils/elq-lib.js

@@ -101,12 +101,6 @@ export class ElqLib {
       this.lookup_visitor_by_recipient_id();
     }
     this.lookup_visitor_by_cookie();
-    // else {
-    //   // If no visitor ID, attempt to do a visitor lookup with an Eloqua cookie
-    //   this.lookup_visitor_by_cookie(); //preference center
-    // }
-    // Start with a recipient lookup if ID was supplied in URL
-    //this.lookup_subscription_by_email();
   }
   store_url_vars() {
     // Clear the current url_vars
@@ -173,7 +167,7 @@ export class ElqLib {
       this.update_user_details();
       this.populate_mapped_fields();
     }
-    if (actionSucceeded && typeof window.GetElqGroupMembershipStatus === "function") {
+    if (actionSucceeded && typeof window.GetElqGroupMembershipStatus === 'function') {
       this.populateCheckboxes();
     }
   }
@@ -234,9 +228,14 @@ export class ElqLib {
       if (email) {
         console.log(`LOOKUP: Found contact email address: ${email}`);
         this.user_elq_email = email.trim();
-        //this.lookup_contact_by_email();
         this.lookup_subscription_by_email();
-        //this.callback_queue.push(this.handle_contact_lookup.bind(this));
+        var cookieValue = this.user_elq_email;
+        var date = new Date();
+        date.setTime(date.getTime() + 14 * 24 * 60 * 60 * 1000); // 14 days in milliseconds
+        var expires = 'expires=' + date.toUTCString();
+        document.cookie = 'elq-uid=' + encodeURIComponent(cookieValue) + ';' + expires + ';path=/;SameSite=Strict;Secure';
+        // this.lookup_contact_by_email();
+        // this.callback_queue.push(this.handle_contact_lookup.bind(this));
         return true;
       }
       else {
@@ -357,7 +356,9 @@ export class ElqLib {
   populateCheckboxes() {
     if (typeof window.GetElqGroupMembershipStatus === 'function') {
       console.log('populating checkboxes...');
-      this.user_elq_email ? document.querySelector('.cookie-email').innerHTML = this.user_elq_email : document.querySelector('.cookie-email').innerHTML = "email information is not available";
+      this.user_elq_email
+        ? (document.querySelector('.cookie-email').innerHTML = this.user_elq_email)
+        : (document.querySelector('.cookie-email').innerHTML = 'email information is not available');
       document.querySelectorAll('input.groupId').forEach((element) => {
         const subscribedGroupId = element.getAttribute('data-sub-groupid');
         const unSubscribedGroupId = element.getAttribute('data-unsub-groupid');

package/dist/custom-elements/index.d.ts

@@ -74,6 +74,12 @@ export const FooterForm: {
   new (): FooterForm;
 };
 
+interface GenericForm extends Components.GenericForm, HTMLElement {}
+export const GenericForm: {
+  prototype: GenericForm;
+  new (): GenericForm;
+};
+
 interface IconAsset extends Components.IconAsset, HTMLElement {}
 export const IconAsset: {
   prototype: IconAsset;