@ptcwebops/ptcw-design 6.3.35 → 6.3.36-beta

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

@@ -76,9 +76,6 @@ export class PtcTextfield {
       this.mdcTextfieldComponent.valid = this.customInput.checkValidity();
     }
   }
-  async getValidationMessage(type) {
-    return ValidationMessages[this.language][type];
-  }
   componentWillLoad() {
     this.language = getLanguageFromURL();
   }
@@ -102,6 +99,9 @@ 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;
   }
-  async setHelperText() {
-    this.helpertext = await this.getValidationMessage('required');
+  setHelperText() {
+    this.helpertext = this.getValidationMessage('required');
     if ((this.type === 'email' && this.fieldName === 'email') || (this.type === 'email' && this.fieldName === "companyemail")) {
       if (this.customInput.validity.valueMissing) {
-        this.helpertext = await this.getValidationMessage('email');
+        this.helpertext = this.getValidationMessage('email');
       }
       else if (!this.customInput.validity.valid) {
-        this.helpertext = await this.getValidationMessage('validemail');
+        this.helpertext = 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 = await this.getValidationMessage('required');
+        this.helpertext = this.getValidationMessage('required');
       }
       else if (this.customInput.validity.patternMismatch) {
-        this.helpertext = await this.getValidationMessage('firstname');
+        this.helpertext = this.getValidationMessage('firstname');
       }
     }
     else if (this.fieldName === 'lastname') {
       if (this.customInput.validity.valueMissing) {
-        this.helpertext = await this.getValidationMessage('required');
+        this.helpertext = this.getValidationMessage('required');
       }
       else if (this.customInput.validity.patternMismatch) {
-        this.helpertext = await this.getValidationMessage('lastname');
+        this.helpertext = this.getValidationMessage('lastname');
       }
     }
     else if (this.fieldId === 'contact-phone') {
       if (this.iti) {
         if (this.inputValue === '' && this.required) {
-          this.helpertext = await this.getValidationMessage('tel');
+          this.helpertext = this.getValidationMessage('tel');
         }
         else if (!this.iti.isValidNumber()) {
-          this.helpertext = await this.getValidationMessage('validtel');
+          this.helpertext = this.getValidationMessage('validtel');
         }
       }
     }
     else if (this.fieldId === "confirm-email") {
       if (!this.matchStatus && !!this.customInput.value) {
-        this.helpertext = await this.getValidationMessage('confirmemail');
+        this.helpertext = this.getValidationMessage('confirmemail');
       }
     }
   }
@@ -224,7 +224,6 @@ export class PtcTextfield {
     const textFields = document.querySelectorAll('.mdc-text-field');
     textFields.forEach((textField) => {
       const input = textField.querySelector('input');
-      const textArea = textField.querySelector('textarea');
       if (input) {
         input.addEventListener('focus', () => {
           if (this.lastInteraction === 'keyboard') {
@@ -240,21 +239,6 @@ export class PtcTextfield {
           textField.classList.remove('keyboard-focus', 'mouse-focus');
         });
       }
-      if (textArea) {
-        textArea.addEventListener('focus', () => {
-          if (this.lastInteraction === 'keyboard') {
-            textField.classList.add('keyboard-focus');
-            textField.classList.remove('mouse-focus');
-          }
-          else {
-            textField.classList.add('mouse-focus');
-            textField.classList.remove('keyboard-focus');
-          }
-        });
-        textArea.addEventListener('blur', () => {
-          textField.classList.remove('keyboard-focus', 'mouse-focus');
-        });
-      }
     });
   }
   render() {
@@ -265,13 +249,11 @@ 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" })), this.type === 'textarea' ? (h("div", { class: "textarea-wrapper" }, h("textarea", Object.assign({ ref: customInput => {
-          this.customInput = customInput;
-        }, id: this.fieldId, class: this.getInputClassName() }, (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, placeholder: this.placeholderText }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { onInput: e => this.handleInput(e) })), this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null)) : (h("input", Object.assign({ 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({}, (this.disabled ? { disabled: true } : null), { 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 })))),
+        }, 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
-                   ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.fieldName }, 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.infoText ? h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--info-msg" }, this.infoText) : null, (this.ptcMaxLength && this.type === 'text') ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
+                   ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.fieldName }, 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.infoText ? h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--info-msg" }, this.infoText) : null, this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
       /* Alert message */
       h("div", { class: "ptc-text-field-alert-line" }, !!this.alertText ? (h("div", { class: "mdc-text-field-helper-text--alert-msg" }, h("svg", { class: "alert-msg-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Info", "clip-path": "url(#clip0_227_7670)" }, h("path", { id: "Vector", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9 6V13H7V6H9ZM8 5C8.55229 5 9 4.55228 9 4C9 3.44772 8.55229 3 8 3C7.44772 3 7 3.44772 7 4C7 4.55228 7.44772 5 8 5Z", fill: "#197BC0" })), h("defs", null, h("clipPath", { id: "clip0_227_7670" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.alertText)) : null, !!this.alertText && this.alertTextContent ? h("div", { class: "mdc-text-field-helper-text--alert-content-msg" }, this.alertTextContent) : null),
     ]) : (h("input", { id: this.fieldId, name: this.fieldName, type: "hidden", "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }))));
@@ -301,7 +283,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ID"
+          "text": ""
         },
         "attribute": "field-id",
         "reflect": false
@@ -318,7 +300,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "text, button, email, file and etc. This value triggers different validation"
+          "text": ""
         },
         "attribute": "type",
         "reflect": false,
@@ -336,7 +318,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Is this a mandatory field?"
+          "text": ""
         },
         "attribute": "required",
         "reflect": false,
@@ -354,7 +336,7 @@ export class PtcTextfield {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Text counter limit"
+          "text": ""
         },
         "attribute": "ptc-max-length",
         "reflect": false
@@ -371,7 +353,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Label Text"
+          "text": ""
         },
         "attribute": "label-text",
         "reflect": false,
@@ -389,7 +371,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Validation text (red)"
+          "text": ""
         },
         "attribute": "helpertext",
         "reflect": false,
@@ -407,7 +389,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Info Text (black)"
+          "text": ""
         },
         "attribute": "info-text",
         "reflect": false
@@ -424,7 +406,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Alert Text"
+          "text": ""
         },
         "attribute": "alert-text",
         "reflect": false
@@ -441,7 +423,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Alert Text Content"
+          "text": ""
         },
         "attribute": "alert-text-content",
         "reflect": false
@@ -458,7 +440,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Disable the field"
+          "text": ""
         },
         "attribute": "disabled",
         "reflect": false,
@@ -476,7 +458,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "input \"name\" value. e.g.: 'phone', 'email', 'firstname', 'lastname'"
+          "text": ""
         },
         "attribute": "field-name",
         "reflect": false,
@@ -494,7 +476,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Eloqua Data Name (for the eloqua)"
+          "text": ""
         },
         "attribute": "ptc-data-eloqua-name",
         "reflect": false
@@ -511,7 +493,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Eloqua Target Data Name (for the eloqua)"
+          "text": ""
         },
         "attribute": "ptc-data-target-eloqua-name",
         "reflect": false
@@ -538,14 +520,11 @@ export class PtcTextfield {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "(input: HTMLInputElement | HTMLTextAreaElement) => string",
-          "resolved": "(input: HTMLInputElement | HTMLTextAreaElement) => string",
+          "original": "(input: HTMLInputElement) => string",
+          "resolved": "(input: HTMLInputElement) => string",
           "references": {
             "HTMLInputElement": {
               "location": "global"
-            },
-            "HTMLTextAreaElement": {
-              "location": "global"
             }
           }
         },
@@ -553,7 +532,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Custom Validation - String"
+          "text": ""
         }
       },
       "ignoreBlindSubmit": {
@@ -568,7 +547,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Ignore Blind Submit?"
+          "text": ""
         },
         "attribute": "ignore-blind-submit",
         "reflect": false,
@@ -586,7 +565,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Place holder Text"
+          "text": ""
         },
         "attribute": "placeholder-text",
         "reflect": false
@@ -603,7 +582,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Inject styles for customization"
+          "text": ""
         },
         "attribute": "styles",
         "reflect": false
@@ -620,7 +599,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Text Field Form"
+          "text": ""
         },
         "attribute": "textfield-form",
         "reflect": false,
@@ -669,25 +648,6 @@ 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,14 +82,8 @@ 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 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))));
+    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))));
   }
   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,11 +5712,6 @@ 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;
@@ -5745,11 +5740,6 @@ 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);
 }
@@ -5800,11 +5790,6 @@ 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%;

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

@@ -1,5 +1,4 @@
 import { Host, h } from '@stencil/core';
-import { createFocusTrap } from 'focus-trap';
 export class PtcTheaterVideoModal {
   constructor() {
     this.cards = undefined;
@@ -7,48 +6,22 @@ export class PtcTheaterVideoModal {
     this.currentCardIndex = 0;
     this.filteredTagName = undefined;
     this.modalType = undefined;
-    this.focusCardElement = undefined;
   }
-  async updateData(data, currentModalIndex, cardElement) {
+  // @Listen('filterCliked', { target: 'document' })
+  // handleFilterClick(event: CustomEvent) {
+  //   const filters = event.detail;
+  //   this.filteredTagName = filters['selected-tag'].trim();
+  // }
+  async updateData(data, currentModalIndex) {
     // debugger
     this.cards = data;
-    this.focusCardElement = cardElement;
     this.currentCardIndex = currentModalIndex;
     this.modalType = this.cards[this.currentCardIndex].modalType;
     this.showModal = true;
-    setTimeout(() => {
-      const closebtn = this.hostEl.querySelector('.vm-close');
-      closebtn === null || closebtn === void 0 ? void 0 : closebtn.focus();
-      const modalDescWrap = this.hostEl.querySelector('.video-modal-description');
-      if (modalDescWrap) {
-        modalDescWrap.scrollHeight > modalDescWrap.clientHeight
-          ? modalDescWrap.setAttribute('tabindex', '0')
-          : modalDescWrap.removeAttribute('tabindex');
-      }
-    }, 200);
-    setTimeout(() => {
-      this.trap = createFocusTrap(this.modalPopUpRef, {
-        escapeDeactivates: true,
-        clickOutsideDeactivates: true,
-        returnFocusOnDeactivate: true,
-        onActivate: () => {
-          this.trap.pause();
-        },
-        onDeactivate: () => {
-          this.closeCardModal();
-          this.trap.deactivate();
-        }
-      });
-      this.trap.activate();
-    }, 200);
   }
   closeCardModal() {
     this.showModal = false;
     this.cards = [];
-    setTimeout(() => {
-      let focusDiv = this.focusCardElement.querySelector('.img-wrap');
-      focusDiv === null || focusDiv === void 0 ? void 0 : focusDiv.focus();
-    }, 200);
   }
   showNextCard() {
     if (this.currentCardIndex < this.cards.length - 1) {
@@ -89,13 +62,7 @@ export class PtcTheaterVideoModal {
   }
   render() {
     return (h(Host, null, h("slot", null), this.showModal &&
-      (this.modalType != 'only-video' ? (h("div", { class: "modal", ref: el => (this.modalPopUpRef = el) }, h("div", { class: "modal-container ptc-container" }, h("div", { class: "vm-close-container" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close mf-listen', tabIndex: 0, onKeyDown: (e) => {
-          if (e.key === 'Enter')
-            this.closeCardModal();
-        } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" })))))), h("div", { class: "is-grid has-col-gap-xl has-row-gap-lg" }, h("div", { class: 'is-col is-col-7-lg' }, h("div", { class: "v-modal-left" }, h("div", { class: 'v-nav' }, h("button", { onClick: () => this.showPrevCard(), disabled: this.currentCardIndex === 0 }, "Previous Video"), h("div", { class: 'v-number' }, ' ', this.currentCardIndex + 1, " of ", this.cards.length), h("button", { onClick: () => this.showNextCard(), disabled: this.currentCardIndex === this.cards.length - 1 }, "Next Video")), h("div", { class: 'aspect-ratio-container ' }, h("div", { class: 'video-container' }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` }))), h("div", { class: "card-description-content" }, h("ptc-title", { type: "h3", "title-size": "large", "title-color": "white", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", styles: ".is-standard{margin-top:14px !important}" }, this.cards[this.currentCardIndex].title), h("ptc-para", { "font-size": "medium", "font-weight": "w-4", "para-color": "white", "para-margin": "margin-3", "para-line-h": "line-height-p", innerHTML: this.cards[this.currentCardIndex].cardDescription })))), h("div", { class: 'is-col is-col-5-lg' }, h("div", { class: "video-modal-description" }, h("div", { innerHTML: this.cards[this.currentCardIndex].descriptionModal }))))))) : (h("div", { class: "modal modal-only-video", ref: el => (this.modalPopUpRef = el) }, h("div", { class: "modal-wrapper" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close mf-listen', tabIndex: 0, onKeyDown: (e) => {
-          if (e.key === 'Enter')
-            this.closeCardModal();
-        } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" }))))), h("div", { class: 'aspect-ratio-container ' }, h("div", { class: 'video-container' }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` })))))))));
+      (this.modalType != 'only-video' ? (h("div", { class: "modal" }, h("div", { class: "modal-container ptc-container" }, h("div", { class: "vm-close-container" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" })))))), h("div", { class: "is-grid has-col-gap-xl has-row-gap-lg" }, h("div", { class: 'is-col is-col-7-lg' }, h("div", { class: "v-modal-left" }, h("div", { class: 'v-nav' }, h("button", { onClick: () => this.showPrevCard(), disabled: this.currentCardIndex === 0 }, "Previous Video"), h("div", { class: 'v-number' }, ' ', this.currentCardIndex + 1, " of ", this.cards.length), h("button", { onClick: () => this.showNextCard(), disabled: this.currentCardIndex === this.cards.length - 1 }, "Next Video")), h("div", { class: 'aspect-ratio-container ' }, h("div", { class: 'video-container' }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` }))), h("div", { class: "card-description-content" }, h("ptc-title", { type: "h3", "title-size": "large", "title-color": "white", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", styles: ".is-standard{margin-top:14px !important}" }, this.cards[this.currentCardIndex].title), h("ptc-para", { "font-size": "medium", "font-weight": "w-4", "para-color": "white", "para-margin": "margin-3", "para-line-h": "line-height-p", innerHTML: this.cards[this.currentCardIndex].cardDescription })))), h("div", { class: 'is-col is-col-5-lg' }, h("div", { class: "video-modal-description" }, h("div", { innerHTML: this.cards[this.currentCardIndex].descriptionModal }))))))) : (h("div", { class: "modal modal-only-video" }, h("div", { class: "modal-wrapper" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" }))))), h("div", { class: 'aspect-ratio-container ' }, h("div", { class: 'video-container' }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` })))))))));
   }
   static get is() { return "ptc-theater-video-modal"; }
   static get encapsulation() { return "scoped"; }
@@ -115,49 +82,24 @@ export class PtcTheaterVideoModal {
       "showModal": {},
       "currentCardIndex": {},
       "filteredTagName": {},
-      "modalType": {},
-      "focusCardElement": {}
+      "modalType": {}
     };
   }
-  static get events() {
-    return [{
-        "method": "modalClosed",
-        "name": "modalClosed",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
   static get methods() {
     return {
       "updateData": {
         "complexType": {
-          "signature": "(data: any, currentModalIndex: any, cardElement?: HTMLElement) => Promise<void>",
+          "signature": "(data: any, currentModalIndex: any) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
             }, {
               "tags": [],
               "text": ""
-            }, {
-              "tags": [],
-              "text": ""
             }],
           "references": {
             "Promise": {
               "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
             }
           },
           "return": "Promise<void>"

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

@@ -52,12 +52,7 @@ export class PtcTheaterVideoPlaylist {
     this.cardElements.forEach((cardElement, index) => {
       this.cards.push(this.setCardData(cardElement, index));
       cardElement.addEventListener('click', () => {
-        this.showCardDetails(index, cardElement);
-      });
-      cardElement.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter') {
-          this.showCardDetails(index, cardElement);
-        }
+        this.showCardDetails(index);
       });
     });
   }
@@ -92,12 +87,12 @@ export class PtcTheaterVideoPlaylist {
     };
     return cardData;
   }
-  showCardDetails(index, cardElement) {
+  showCardDetails(index) {
     this.currentCardIndex = index;
     // this.showModal = true;
     const modalElement = document.querySelector('ptc-theater-video-modal');
     if (modalElement) {
-      modalElement.updateData(this.cards, this.currentCardIndex, cardElement);
+      modalElement.updateData(this.cards, this.currentCardIndex);
     }
   }
   render() {

package/dist/collection/components/ptc-tooltip-v2/ptc-tooltip-v2.css

@@ -82,26 +82,26 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);