@ptcwebops/ptcw-design 6.3.30-beta → 6.3.30

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

@@ -3,6 +3,32 @@ import { createFocusTrap } from 'focus-trap';
 export class PtcRelatedCardRail {
   constructor() {
     //lastFocusElement: HTMLElement;
+    this.setFocusTrap = () => {
+      //console.log('this.focusTrap: ' + this.focusTrap)
+      if (!this.focusTrap) {
+        this.focusTrap = createFocusTrap(this.el, {
+          escapeDeactivates: true,
+          returnFocusOnDeactivate: true,
+          onActivate: () => {
+            if (!this.openedByKeyboard) {
+              this.focusTrap.pause(); // If opened by mouse, prevent immediate focus trapping
+            }
+          },
+          onDeactivate: () => {
+            setTimeout(() => {
+              this.closed = true;
+            }, 0);
+          },
+          tabbableOptions: {
+            getShadowRoot: true,
+          },
+        });
+      }
+      if (this.isVisible === true && this.openedByKeyboard === true) {
+        this.focusTrap && this.focusTrap.activate();
+        //console.log('activate focus trap');
+      }
+    };
     this.setScreenBasedProps = () => {
       let windowWidth = window.innerWidth;
       let props = {
@@ -79,33 +105,7 @@ export class PtcRelatedCardRail {
         let percentageSrolled = Math.floor((scrollTop / trackLength) * 100);
         if (percentageSrolled >= 50) {
           this.el.style.display = 'block';
-          if (!this.focusTrap) {
-            this.focusTrap = createFocusTrap(this.el, {
-              escapeDeactivates: true,
-              returnFocusOnDeactivate: true,
-              setReturnFocus: "#last-focus",
-              onActivate: () => {
-                if (!this.openedByKeyboard) {
-                  this.focusTrap.pause(); // If opened by mouse, prevent immediate focus trapping
-                }
-              },
-              onDeactivate: () => {
-                // this.focusTrap?.deactivate();
-                // this.focusTrap = undefined;
-                console.log('Hello~~~ onDeactivate');
-                setTimeout(() => {
-                  this.closed = true;
-                }, 0);
-                //this.setReturnFocus();
-              },
-              tabbableOptions: {
-                getShadowRoot: true,
-              },
-            });
-            if (this.openedByKeyboard && this.closed === false) {
-              this.focusTrap.activate();
-            }
-          }
+          this.isVisible = true;
         }
         else {
           if (this.focusTrap && this.closed === true) {
@@ -113,6 +113,7 @@ export class PtcRelatedCardRail {
             this.focusTrap = undefined;
           }
           this.el.style.display = 'none';
+          this.isVisible = false;
         }
         let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
         let pageFooter = document.querySelector(this.footerQuerySelector);
@@ -150,7 +151,7 @@ export class PtcRelatedCardRail {
         if (this.focusTrap && this.closed === true) {
           this.focusTrap.deactivate();
           this.focusTrap = undefined;
-          console.log("flag");
+          //console.log('flag');
         }
       }
     };
@@ -159,6 +160,7 @@ export class PtcRelatedCardRail {
     };
     this.footerQuerySelector = undefined;
     this.railTitle = 'Read More Case Studies';
+    this.isVisible = false;
     this.closed = false;
     this.cardInView = 0;
     this.data = [];
@@ -169,15 +171,16 @@ export class PtcRelatedCardRail {
     };
     this.openedByKeyboard = false;
   }
+  onVisibleChanged(newValue) {
+    if (newValue) {
+      this.setFocusTrap();
+      //console.log('isVisible: ' + this.isVisible);
+    }
+  }
   handleKeyClose(event) {
     if (event.key === 'Enter' || event.key === 'Esc') {
       event.preventDefault();
-      if (this.focusTrap) {
-        this.focusTrap.deactivate();
-      }
-      else {
-        this.closed = true;
-      }
+      this.closed = true;
     }
   }
   connectedCallback() {
@@ -206,9 +209,9 @@ export class PtcRelatedCardRail {
       }
     }
     this.handleOnScrollBehaviour();
+    this.setScreenBasedProps();
   }
   componentDidLoad() {
-    this.setScreenBasedProps();
     window.addEventListener('scroll', this.handleOnScrollBehaviour);
     window.addEventListener('resize', this.handleOnResizeBehaviour);
   }
@@ -225,9 +228,7 @@ export class PtcRelatedCardRail {
         if (this.focusTrap) {
           this.focusTrap.deactivate();
         }
-        else {
-          this.closed = true;
-        }
+        this.closed = true;
       }, tabindex: "0" }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", class: "mf-listen", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", class: "mf-listen", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map((item, index) => (h("div", { class: "content mf-listen", id: `card-rail-content-${index}`, onKeyDown: (event) => {
         event.key === 'Enter' && window.open(item.href);
       }, onClick: () => {
@@ -282,6 +283,24 @@ export class PtcRelatedCardRail {
         "attribute": "rail-title",
         "reflect": false,
         "defaultValue": "'Read More Case Studies'"
+      },
+      "isVisible": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-visible",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -295,4 +314,10 @@ export class PtcRelatedCardRail {
     };
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "isVisible",
+        "methodName": "onVisibleChanged"
+      }];
+  }
 }

package/dist/collection/components/ptc-sticky-icons/ptc-sticky-icons.js

@@ -11,6 +11,7 @@ export class PtcStickyIcons {
   }
   setHostLocation() {
     let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
+    const detailSection = document.querySelector(".cs-detail-section");
     let currEle = this.el;
     // get the element
     const element = document.querySelector("ptc-sticky-icons");
@@ -19,6 +20,14 @@ export class PtcStickyIcons {
       if (width < 992) {
         currEle.parentElement.appendChild(currEle);
         currEle.parentElement.style.paddingRight = "0px";
+        // Code for case study page only
+        // Moving sticky icon in the last ptc-section div
+        if (detailSection) {
+          const lastSection = detailSection.querySelectorAll('.content-section section.ptc-section').length ? detailSection.querySelectorAll('section.ptc-section')[detailSection.querySelectorAll('section.ptc-section').length - 1] : null;
+          if (lastSection && !lastSection.contains(element)) {
+            lastSection.appendChild(currEle);
+          }
+        }
       }
       else {
         currEle.parentElement.prepend(currEle);

package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.js

@@ -11,6 +11,12 @@ export class PtcTextCopyWithBackground {
     this.disableLightLinks = false;
     this.styles = undefined;
   }
+  componentDidLoad() {
+    var _a;
+    if (this.hostEle.getAttribute('type') === 'hero-footer-cta') {
+      (_a = this.hostEle.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add('text-copy-footer-cta');
+    }
+  }
   render() {
     const classMap = this.getCssClassMap();
     const slitFill = this.getSlitFillColor();
@@ -216,4 +222,5 @@ export class PtcTextCopyWithBackground {
       }
     };
   }
+  static get elementRef() { return "hostEle"; }
 }

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

@@ -76,6 +76,9 @@ export class PtcTextfield {
       this.mdcTextfieldComponent.valid = this.customInput.checkValidity();
     }
   }
+  async getValidationMessage(type) {
+    return ValidationMessages[this.language][type];
+  }
   componentWillLoad() {
     this.language = getLanguageFromURL();
   }
@@ -99,9 +102,6 @@ export class PtcTextfield {
     }
     this.setupFocusHandlers();
   }
-  getValidationMessage(type) {
-    return ValidationMessages[this.language][type];
-  }
   getPhoneValidation() {
     if (this.fieldId === 'contact-phone' && this.fieldName === 'phone') {
       if (!this.required && this.inputValue === '') {
@@ -165,14 +165,14 @@ export class PtcTextfield {
     }
     return validationPattern;
   }
-  setHelperText() {
-    this.helpertext = this.getValidationMessage('required');
+  async setHelperText() {
+    this.helpertext = await this.getValidationMessage('required');
     if ((this.type === 'email' && this.fieldName === 'email') || (this.type === 'email' && this.fieldName === "companyemail")) {
       if (this.customInput.validity.valueMissing) {
-        this.helpertext = this.getValidationMessage('email');
+        this.helpertext = await this.getValidationMessage('email');
       }
       else if (!this.customInput.validity.valid) {
-        this.helpertext = this.getValidationMessage('validemail');
+        this.helpertext = await this.getValidationMessage('validemail');
       }
       else if (this.customInput.validity.valid) {
         this.helpertext = '';
@@ -180,33 +180,33 @@ export class PtcTextfield {
     }
     else if (this.fieldName === 'firstname') {
       if (this.customInput.validity.valueMissing) {
-        this.helpertext = this.getValidationMessage('required');
+        this.helpertext = await this.getValidationMessage('required');
       }
       else if (this.customInput.validity.patternMismatch) {
-        this.helpertext = this.getValidationMessage('firstname');
+        this.helpertext = await this.getValidationMessage('firstname');
       }
     }
     else if (this.fieldName === 'lastname') {
       if (this.customInput.validity.valueMissing) {
-        this.helpertext = this.getValidationMessage('required');
+        this.helpertext = await this.getValidationMessage('required');
       }
       else if (this.customInput.validity.patternMismatch) {
-        this.helpertext = this.getValidationMessage('lastname');
+        this.helpertext = await this.getValidationMessage('lastname');
       }
     }
     else if (this.fieldId === 'contact-phone') {
       if (this.iti) {
         if (this.inputValue === '' && this.required) {
-          this.helpertext = this.getValidationMessage('tel');
+          this.helpertext = await this.getValidationMessage('tel');
         }
         else if (!this.iti.isValidNumber()) {
-          this.helpertext = this.getValidationMessage('validtel');
+          this.helpertext = await this.getValidationMessage('validtel');
         }
       }
     }
     else if (this.fieldId === "confirm-email") {
       if (!this.matchStatus && !!this.customInput.value) {
-        this.helpertext = this.getValidationMessage('confirmemail');
+        this.helpertext = await this.getValidationMessage('confirmemail');
       }
     }
   }
@@ -249,7 +249,7 @@ export class PtcTextfield {
       h("div", { class: `mdc-text-field mdc-text-field--outlined mdc-text-field--no-label
           ${this.fieldId === 'contact-phone' ? 'intl-phone-adjustments' : ''}`, ref: mdcTextfield => {
           this.mdcTextfield = mdcTextfield;
-        } }, 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({}, (this.disabled ? { disabled: true } : null), { ref: customInput => {
+        } }, 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 => {
           this.customInput = customInput;
         }, 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.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { placeholder: this.placeholderText }))),
       h("div", { class: `mdc-text-field-helper-line
@@ -283,7 +283,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "ID"
         },
         "attribute": "field-id",
         "reflect": false
@@ -300,7 +300,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "text, button, email, file and etc. This value triggers different validation"
         },
         "attribute": "type",
         "reflect": false,
@@ -318,7 +318,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Is this a mandatory field?"
         },
         "attribute": "required",
         "reflect": false,
@@ -336,7 +336,7 @@ export class PtcTextfield {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Text counter limit"
         },
         "attribute": "ptc-max-length",
         "reflect": false
@@ -353,7 +353,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Label Text"
         },
         "attribute": "label-text",
         "reflect": false,
@@ -371,7 +371,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Validation text (red)"
         },
         "attribute": "helpertext",
         "reflect": false,
@@ -389,7 +389,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Info Text (black)"
         },
         "attribute": "info-text",
         "reflect": false
@@ -406,7 +406,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Alert Text"
         },
         "attribute": "alert-text",
         "reflect": false
@@ -423,7 +423,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Alert Text Content"
         },
         "attribute": "alert-text-content",
         "reflect": false
@@ -440,7 +440,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Disable the field"
         },
         "attribute": "disabled",
         "reflect": false,
@@ -458,7 +458,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "input \"name\" value. e.g.: 'phone', 'email', 'firstname', 'lastname'"
         },
         "attribute": "field-name",
         "reflect": false,
@@ -476,7 +476,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Eloqua Data Name (for the eloqua)"
         },
         "attribute": "ptc-data-eloqua-name",
         "reflect": false
@@ -493,7 +493,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Eloqua Target Data Name (for the eloqua)"
         },
         "attribute": "ptc-data-target-eloqua-name",
         "reflect": false
@@ -532,7 +532,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Custom Validation - String"
         }
       },
       "ignoreBlindSubmit": {
@@ -547,7 +547,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Ignore Blind Submit?"
         },
         "attribute": "ignore-blind-submit",
         "reflect": false,
@@ -565,7 +565,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Place holder Text"
         },
         "attribute": "placeholder-text",
         "reflect": false
@@ -582,7 +582,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Inject styles for customization"
         },
         "attribute": "styles",
         "reflect": false
@@ -599,7 +599,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Text Field Form"
         },
         "attribute": "textfield-form",
         "reflect": false,
@@ -648,6 +648,25 @@ export class PtcTextfield {
           "text": "",
           "tags": []
         }
+      },
+      "getValidationMessage": {
+        "complexType": {
+          "signature": "(type: string) => Promise<string>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<string>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }

package/dist/collection/components/ptc-theater-video/ptc-theater-video.css

@@ -82,8 +82,14 @@ ptc-link, ptc-square-card,
   position: relative;
   border-radius: 12px;
   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.24);
+  margin-top: 5px;
   cursor: pointer;
 }
+:host .img-wrap:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .img-wrap img {
   max-width: 100%;
   border-radius: 12px;

package/dist/collection/components/ptc-theater-video/ptc-theater-video.js

@@ -21,7 +21,7 @@ export class PtcTheaterVideo {
     });
   }
   render() {
-    return (h(Host, { "video-id": this.videoId, "vtag-name": this.vtagName, "modal-type": this.modalType }, h("div", { class: "img-wrap", onClick: () => this.showCardDetails() }, h("img", { src: this.thumbImg, alt: "" }), h("span", { class: 'card-number' }, this.cardNumber + 1), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "54", height: "56", viewBox: "0 0 54 56", fill: "none" }, h("g", { filter: "url(#filter0_d_214_969)" }, h("path", { d: "M42 20L12 36V4L42 20Z", fill: "white" })), h("defs", null, h("filter", { id: "filter0_d_214_969", x: "0", y: "0", width: "54", height: "56", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" }, h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feOffset", { dy: "8" }), h("feGaussianBlur", { stdDeviation: "6" }), h("feComposite", { in2: "hardAlpha", operator: "out" }), h("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" }), h("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_214_969" }), h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_214_969", result: "shape" }))))), h("h3", { class: 'vcard-title' }, this.cardTitle), h("div", { class: "hidden description" }, h("slot", null))));
+    return (h(Host, { "video-id": this.videoId, "vtag-name": this.vtagName, "modal-type": this.modalType }, h("div", { class: "img-wrap mf-listen", onClick: () => this.showCardDetails(), tabIndex: 0 }, h("img", { src: this.thumbImg, alt: "" }), h("span", { class: 'card-number' }, this.cardNumber + 1), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "54", height: "56", viewBox: "0 0 54 56", fill: "none" }, h("g", { filter: "url(#filter0_d_214_969)" }, h("path", { d: "M42 20L12 36V4L42 20Z", fill: "white" })), h("defs", null, h("filter", { id: "filter0_d_214_969", x: "0", y: "0", width: "54", height: "56", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" }, h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feOffset", { dy: "8" }), h("feGaussianBlur", { stdDeviation: "6" }), h("feComposite", { in2: "hardAlpha", operator: "out" }), h("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" }), h("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_214_969" }), h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_214_969", result: "shape" }))))), h("h3", { class: 'vcard-title' }, this.cardTitle), h("div", { class: "hidden description" }, h("slot", null))));
   }
   static get is() { return "ptc-theater-video"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ptc-theater-video-modal/ptc-theater-video-modal.css

@@ -5712,6 +5712,11 @@ Credits to Dave Berning
   padding: 8px;
   transform: translateX(8px);
 }
+.modal .modal-container .vm-close:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 @media only screen and (min-width: 1200px) {
   .modal .modal-container .vm-close {
     right: -10px;
@@ -5740,6 +5745,11 @@ Credits to Dave Berning
 .modal .modal-container .v-nav button:disabled {
   color: var(--color-gray-06);
 }
+.modal .modal-container .v-nav button:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 .modal .modal-container .card-description-content p {
   color: var(--color-white);
 }
@@ -5790,6 +5800,11 @@ Credits to Dave Berning
   margin-right: var(--ptc-element-spacing-04);
   margin-top: var(--ptc-element-spacing-04);
 }
+.modal.modal-only-video .modal-wrapper .vm-close:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 .modal.modal-only-video .modal-wrapper .aspect-ratio-container {
   width: 100%;
   height: 100%;