@ptcwebops/ptcw-design 6.3.37 → 6.3.38

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

@@ -1,51 +1,52 @@
-import { h, Host } from '@stencil/core';
-import { MDCTextField } from '@material/textfield';
-import intlTelInput from 'intl-tel-input';
-import { ValidationMessages } from '../../utils/validation-messages';
-import { getLanguageFromURL } from '../../utils/utils';
+import { h, Host, } from "@stencil/core";
+import { MDCTextField } from "@material/textfield";
+import intlTelInput from "intl-tel-input";
+import { ValidationMessages } from "../../utils/validation-messages";
+import { getLanguageFromURL } from "../../utils/utils";
 export class PtcTextfield {
   constructor() {
-    this.lastInteraction = 'mouse';
-    this.phoneValidity = 'validating';
+    this.lastInteraction = "mouse";
+    this.phoneValidity = "validating";
     this.matchStatus = true;
     this.fieldId = undefined;
-    this.type = 'text';
+    this.type = "text";
     this.required = true;
     this.ptcMaxLength = undefined;
-    this.labelText = 'Email';
-    this.helpertext = '';
+    this.labelText = "Email";
+    this.helpertext = "";
     this.infoText = undefined;
     this.alertText = undefined;
     this.alertTextContent = undefined;
     this.disabled = false;
-    this.fieldName = 'email';
+    this.fieldName = "email";
     this.ptcDataEloquaName = undefined;
     this.ptcDataTargetEloquaName = undefined;
-    this.inputValue = '';
+    this.inputValue = "";
     this.customValidation = undefined;
-    this.language = 'en';
+    this.language = "en";
     this.ignoreBlindSubmit = false;
     this.placeholderText = undefined;
     this.styles = undefined;
-    this.textfieldForm = 'default';
+    this.textfieldForm = "default";
   }
   handleInput(event) {
     this.inputValue = event.target.value;
-    if (this.customInput.id === 'confirm-email') {
-      const emailInput = document.getElementById('contact-email');
+    if (this.customInput.id === "confirm-email") {
+      const emailInput = document.getElementById("contact-email");
       if (emailInput.value === this.customInput.value) {
-        this.customInput.setCustomValidity('');
+        this.customInput.setCustomValidity("");
         this.matchStatus = true;
       }
-      else if (this.customInput.value && emailInput.value !== this.customInput.value) {
-        this.customInput.setCustomValidity('Email addresses must match.');
+      else if (this.customInput.value &&
+        emailInput.value !== this.customInput.value) {
+        this.customInput.setCustomValidity("Email addresses must match.");
         this.matchStatus = false;
       }
     }
   }
   handleFocus(event) {
     const target = event.target;
-    if (target.tagName === 'INPUT') {
+    if (target.tagName === "INPUT") {
       this.inputValue = event.target.value;
       this.setHelperText();
     }
@@ -83,51 +84,51 @@ export class PtcTextfield {
     this.language = getLanguageFromURL();
   }
   componentDidLoad() {
-    if (this.type !== 'hidden') {
+    if (this.type !== "hidden") {
       this.mdcTextfieldComponent = MDCTextField.attachTo(this.mdcTextfield);
     }
-    if (this.fieldId === 'contact-phone' && this.fieldName === 'phone') {
+    if (this.fieldId === "contact-phone" && this.fieldName === "phone") {
       this.iti = intlTelInput(this.customInput, {
         separateDialCode: true,
-        initialCountry: 'auto',
+        initialCountry: "auto",
         nationalMode: true,
-        geoIpLookup: callback => {
-          fetch('https://ipapi.co/json')
-            .then(res => res.json())
-            .then(data => callback(data.country_code))
-            .catch(() => callback('us'));
+        geoIpLookup: (callback) => {
+          fetch("https://ipapi.co/json")
+            .then((res) => res.json())
+            .then((data) => callback(data.country_code))
+            .catch(() => callback("us"));
         },
-        utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/utils.min.js', // Required for formatting/validation
+        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/utils.min.js", // Required for formatting/validation
       });
     }
     this.setupFocusHandlers();
   }
   getPhoneValidation() {
-    if (this.fieldId === 'contact-phone' && this.fieldName === 'phone') {
-      if (!this.required && this.inputValue === '') {
-        if (this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
-          this.mdcTextfield.classList.remove('mdc-text-field--invalid');
+    if (this.fieldId === "contact-phone" && this.fieldName === "phone") {
+      if (!this.required && this.inputValue === "") {
+        if (this.mdcTextfield.classList.contains("mdc-text-field--invalid")) {
+          this.mdcTextfield.classList.remove("mdc-text-field--invalid");
         }
-        if (this.el.classList.contains('invalid-field')) {
-          this.el.classList.remove('invalid-field');
+        if (this.el.classList.contains("invalid-field")) {
+          this.el.classList.remove("invalid-field");
         }
       }
       else {
         if (this.iti.isValidNumber()) {
-          if (this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
-            this.mdcTextfield.classList.remove('mdc-text-field--invalid');
+          if (this.mdcTextfield.classList.contains("mdc-text-field--invalid")) {
+            this.mdcTextfield.classList.remove("mdc-text-field--invalid");
           }
-          if (this.el.classList.contains('invalid-field')) {
-            this.el.classList.remove('invalid-field');
+          if (this.el.classList.contains("invalid-field")) {
+            this.el.classList.remove("invalid-field");
           }
           this.inputValue = this.iti.getNumber();
         }
         else if (!this.iti.isValidNumber()) {
-          if (!this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
-            this.mdcTextfield.classList.add('mdc-text-field--invalid');
+          if (!this.mdcTextfield.classList.contains("mdc-text-field--invalid")) {
+            this.mdcTextfield.classList.add("mdc-text-field--invalid");
           }
-          if (!this.el.classList.contains('invalid-field')) {
-            this.el.classList.add('invalid-field');
+          if (!this.el.classList.contains("invalid-field")) {
+            this.el.classList.add("invalid-field");
           }
         }
       }
@@ -135,145 +136,174 @@ export class PtcTextfield {
   }
   setErrorBackground() {
     if (this.customInput.checkValidity()) {
-      if (this.el.classList.contains('invalid-field')) {
-        this.el.classList.remove('invalid-field');
+      if (this.el.classList.contains("invalid-field")) {
+        this.el.classList.remove("invalid-field");
       }
     }
     else if (!this.customInput.checkValidity()) {
-      if (!this.el.classList.contains('invalid-field')) {
-        this.el.classList.add('invalid-field');
+      if (!this.el.classList.contains("invalid-field")) {
+        this.el.classList.add("invalid-field");
       }
     }
   }
   getInputClassName() {
-    let className = 'mdc-text-field__input';
-    if (this.type === 'tel' && this.fieldName === 'phone') {
+    let className = "mdc-text-field__input";
+    if (this.type === "tel" && this.fieldName === "phone") {
       className = `${className}  intl-tel-input`;
     }
-    else if (this.type === 'text' && this.ptcMaxLength) {
+    else if (this.type === "text" && this.ptcMaxLength) {
       className = `${className}  mdc-text-field--with-internal-counter`;
     }
     return className;
   }
   getValidationPattern() {
-    let validationPattern = '';
-    if ((this.type === 'email' && this.fieldName === 'email') || (this.type === 'email' && this.fieldName === "companyemail")) {
-      validationPattern = "[a-zA-Z0-9._%+\\-]+@[a-zA-Z0-9.\\-]+\\.(?!.*\\..*\\.)[a-zA-Z]{2,15}$"; //updated TLD character limit from 7 to 15
+    let validationPattern = "";
+    if ((this.type === "email" && this.fieldName === "email") ||
+      (this.type === "email" && this.fieldName === "companyemail")) {
+      validationPattern =
+        "[a-zA-Z0-9._%+\\-]+@[a-zA-Z0-9.\\-]+\\.(?!.*\\..*\\.)[a-zA-Z]{2,15}$"; //updated TLD character limit from 7 to 15
     }
-    if (this.fieldName === 'firstname' || this.fieldName === 'lastname') {
-      validationPattern = '^[^!*@&$¥£€>#^~+=<>%]+$';
+    if (this.fieldName === "firstname" || this.fieldName === "lastname") {
+      validationPattern = "^[^!*@&$¥£€>#^~+=<>%]+$";
     }
     return validationPattern;
   }
   async setHelperText() {
-    this.helpertext = await this.getValidationMessage('required');
-    if ((this.type === 'email' && this.fieldName === 'email') || (this.type === 'email' && this.fieldName === "companyemail")) {
+    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 = await this.getValidationMessage('email');
+        this.helpertext = await this.getValidationMessage("email");
       }
       else if (!this.customInput.validity.valid) {
-        this.helpertext = await this.getValidationMessage('validemail');
+        this.helpertext = await this.getValidationMessage("validemail");
       }
       else if (this.customInput.validity.valid) {
-        this.helpertext = '';
+        this.helpertext = "";
       }
     }
-    else if (this.fieldName === 'firstname') {
+    else if (this.fieldName === "firstname") {
       if (this.customInput.validity.valueMissing) {
-        this.helpertext = await this.getValidationMessage('required');
+        this.helpertext = await this.getValidationMessage("required");
       }
       else if (this.customInput.validity.patternMismatch) {
-        this.helpertext = await this.getValidationMessage('firstname');
+        this.helpertext = await this.getValidationMessage("firstname");
       }
     }
-    else if (this.fieldName === 'lastname') {
+    else if (this.fieldName === "lastname") {
       if (this.customInput.validity.valueMissing) {
-        this.helpertext = await this.getValidationMessage('required');
+        this.helpertext = await this.getValidationMessage("required");
       }
       else if (this.customInput.validity.patternMismatch) {
-        this.helpertext = await this.getValidationMessage('lastname');
+        this.helpertext = await this.getValidationMessage("lastname");
       }
     }
-    else if (this.fieldId === 'contact-phone') {
+    else if (this.fieldId === "contact-phone") {
       if (this.iti) {
-        if (this.inputValue === '' && this.required) {
-          this.helpertext = await this.getValidationMessage('tel');
+        if (this.inputValue === "" && this.required) {
+          this.helpertext = await this.getValidationMessage("tel");
         }
         else if (!this.iti.isValidNumber()) {
-          this.helpertext = await this.getValidationMessage('validtel');
+          this.helpertext =
+            await this.getValidationMessage("validtel");
         }
       }
     }
     else if (this.fieldId === "confirm-email") {
       if (!this.matchStatus && !!this.customInput.value) {
-        this.helpertext = await this.getValidationMessage('confirmemail');
+        this.helpertext =
+          await this.getValidationMessage("confirmemail");
       }
     }
   }
   setupFocusHandlers() {
     // Track the last interaction type
-    document.addEventListener('mousedown', () => {
-      this.lastInteraction = 'mouse';
+    document.addEventListener("mousedown", () => {
+      this.lastInteraction = "mouse";
     });
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Tab') {
-        this.lastInteraction = 'keyboard';
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Tab") {
+        this.lastInteraction = "keyboard";
       }
     });
     // Select all elements with the class `mdc-text-field`
-    const textFields = document.querySelectorAll('.mdc-text-field');
+    const textFields = document.querySelectorAll(".mdc-text-field");
     textFields.forEach((textField) => {
-      const input = textField.querySelector('input');
-      const textArea = textField.querySelector('textarea');
+      const input = textField.querySelector("input");
+      const textArea = textField.querySelector("textarea");
       if (input) {
-        input.addEventListener('focus', () => {
-          if (this.lastInteraction === 'keyboard') {
-            textField.classList.add('keyboard-focus');
-            textField.classList.remove('mouse-focus');
+        input.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');
+            textField.classList.add("mouse-focus");
+            textField.classList.remove("keyboard-focus");
           }
         });
-        input.addEventListener('blur', () => {
-          textField.classList.remove('keyboard-focus', 'mouse-focus');
+        input.addEventListener("blur", () => {
+          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');
+        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');
+            textField.classList.add("mouse-focus");
+            textField.classList.remove("keyboard-focus");
           }
         });
-        textArea.addEventListener('blur', () => {
-          textField.classList.remove('keyboard-focus', 'mouse-focus');
+        textArea.addEventListener("blur", () => {
+          textField.classList.remove("keyboard-focus", "mouse-focus");
         });
       }
     });
   }
   render() {
     return (h(Host, { class: `ptc-text-field ${this.textfieldForm}
-        ${this.fieldId === 'contact-phone' ? 'phone-field-style' : ''}
-        ${this.type === 'hidden' ? 'textfield-hidden' : ''}` }, this.styles && h("style", null, this.styles), this.type !== 'hidden' ? ([
+        ${this.fieldId === "contact-phone" ? "phone-field-style" : ""}
+        ${this.type === "hidden" ? "textfield-hidden" : ""}` }, this.styles && h("style", null, this.styles), this.type !== "hidden" ? ([
       this.labelText ? (h("label", { class: "ptc-label" }, this.labelText)) : null,
       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.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 => {
-          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("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) => {
+          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
-                   ${!!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 && this.type === "text" ? (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("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 }))));
   }
   static get is() { return "ptc-textfield"; }
@@ -322,7 +352,7 @@ export class PtcTextfield {
         },
         "attribute": "type",
         "reflect": false,
-        "defaultValue": "'text'"
+        "defaultValue": "\"text\""
       },
       "required": {
         "type": "boolean",
@@ -375,7 +405,7 @@ export class PtcTextfield {
         },
         "attribute": "label-text",
         "reflect": false,
-        "defaultValue": "'Email'"
+        "defaultValue": "\"Email\""
       },
       "helpertext": {
         "type": "string",
@@ -393,7 +423,7 @@ export class PtcTextfield {
         },
         "attribute": "helpertext",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "infoText": {
         "type": "string",
@@ -480,7 +510,7 @@ export class PtcTextfield {
         },
         "attribute": "field-name",
         "reflect": false,
-        "defaultValue": "'email'"
+        "defaultValue": "\"email\""
       },
       "ptcDataEloquaName": {
         "type": "string",
@@ -532,13 +562,13 @@ export class PtcTextfield {
         },
         "attribute": "input-value",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "customValidation": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "(input: HTMLInputElement | HTMLTextAreaElement) => string",
+          "original": "(\r\n\t\tinput: HTMLInputElement | HTMLTextAreaElement,\r\n\t) => string",
           "resolved": "(input: HTMLInputElement | HTMLTextAreaElement) => string",
           "references": {
             "HTMLInputElement": {
@@ -612,7 +642,7 @@ export class PtcTextfield {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'default' | 'email-signup'",
+          "original": "\"default\" | \"email-signup\"",
           "resolved": "\"default\" | \"email-signup\"",
           "references": {}
         },
@@ -624,7 +654,7 @@ export class PtcTextfield {
         },
         "attribute": "textfield-form",
         "reflect": false,
-        "defaultValue": "'default'"
+        "defaultValue": "\"default\""
       }
     };
   }

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -95,7 +99,7 @@ ptc-link, ptc-square-card,
   border-radius: 12px;
 }
 :host .img-wrap svg {
-  fill: #FFF;
+  fill: #fff;
   filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.5));
   position: absolute;
   top: 50%;
@@ -112,7 +116,7 @@ ptc-link, ptc-square-card,
   border-radius: 50%;
   border: 2px solid var(--color-green-05);
   text-align: center;
-  color: #FFF;
+  color: #fff;
   font-size: 18px;
   font-weight: 700;
   display: flex;

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

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class PtcTheaterVideo {
   constructor() {
     this.cardTitle = undefined;
@@ -7,7 +7,7 @@ export class PtcTheaterVideo {
     this.cardNumber = undefined;
     this.videoId = undefined;
     this.vtagName = undefined;
-    this.modalType = 'video-with-description';
+    this.modalType = "video-with-description";
   }
   showCardDetails() {
     // Emit a custom event to signal that the card was clicked
@@ -16,12 +16,12 @@ export class PtcTheaterVideo {
     // });
     // this.ele.dispatchEvent(cardClickEvent);
     this.vCardClicked.emit({
-      'sender': this,
-      'cardNumber': this.cardNumber
+      sender: this,
+      cardNumber: this.cardNumber,
     });
   }
   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 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"; }
@@ -143,7 +143,7 @@ export class PtcTheaterVideo {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'only-video' | 'video-with-description'",
+          "original": "\"only-video\" | \"video-with-description\"",
           "resolved": "\"only-video\" | \"video-with-description\"",
           "references": {}
         },
@@ -155,7 +155,7 @@ export class PtcTheaterVideo {
         },
         "attribute": "modal-type",
         "reflect": false,
-        "defaultValue": "'video-with-description'"
+        "defaultValue": "\"video-with-description\""
       }
     };
   }

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */