@ptcwebops/ptcw-design 6.3.38 → 6.3.39-beta

package/dist/collection/components/ptc-modal-quiz/ptc-modal-quiz.js

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from '@stencil/core';
 var Priority;
 (function (Priority) {
   Priority["Low"] = "low";
@@ -14,7 +14,7 @@ export class PtcModalQuiz {
       this.currentQuestion = 1;
       this.currentSelectedPriority = null;
       this.selectedPriorityRadio = null;
-      let inputs = this.el.shadowRoot.querySelectorAll("input");
+      let inputs = this.el.shadowRoot.querySelectorAll('input');
       for (let i = 0; i < inputs.length; i++) {
         inputs[i].checked = false;
       }
@@ -39,10 +39,8 @@ export class PtcModalQuiz {
         if (!this.traversal[this.currentQuestion]) {
           this.traversal[this.currentQuestion] = {};
         }
-        this.traversal[this.currentQuestion]["priority"] =
-          this.currentSelectedPriority;
-        this.traversal[this.currentQuestion]["radio"] =
-          this.selectedPriorityRadio;
+        this.traversal[this.currentQuestion]["priority"] = this.currentSelectedPriority;
+        this.traversal[this.currentQuestion]["radio"] = this.selectedPriorityRadio;
       }
     };
     this.handlePreviousClick = (e) => {
@@ -51,13 +49,11 @@ export class PtcModalQuiz {
           this.currentSelectedPriority = null;
           this.selectedPriorityRadio.checked = false;
           this.currentQuestion -= 1;
-          this.currentSelectedPriority =
-            this.traversal[this.currentQuestion]["priority"];
+          this.currentSelectedPriority = this.traversal[this.currentQuestion]["priority"];
           this.traversal[this.currentQuestion]["radio"].checked = true;
         }
       };
-      if (e instanceof MouseEvent ||
-        (e instanceof KeyboardEvent && e.key === "Enter")) {
+      if (e instanceof MouseEvent || (e instanceof KeyboardEvent && e.key === "Enter")) {
         if (e instanceof KeyboardEvent) {
           e.preventDefault();
         }
@@ -67,23 +63,19 @@ export class PtcModalQuiz {
     };
     this.handleNextClick = (e) => {
       const handler = () => {
-        if (!e.target.disabled &&
-          this.currentQuestion < this.totalQuestions) {
-          this.answers[this.currentQuestion] =
-            this.currentSelectedPriority;
+        if (!e.target.disabled && this.currentQuestion < this.totalQuestions) {
+          this.answers[this.currentQuestion] = this.currentSelectedPriority;
           this.currentQuestion += 1;
           if (!this.traversal[this.currentQuestion]) {
             this.currentSelectedPriority = null;
             this.selectedPriorityRadio.checked = false;
           }
           else {
-            this.currentSelectedPriority =
-              this.traversal[this.currentQuestion]["priority"];
-            this.selectedPriorityRadio =
-              this.traversal[this.currentQuestion]["radio"];
+            this.currentSelectedPriority = this.traversal[this.currentQuestion]["priority"];
+            this.selectedPriorityRadio = this.traversal[this.currentQuestion]["radio"];
             this.selectedPriorityRadio.checked = true;
           }
-          let modalQuizContainer = this.el.shadowRoot.querySelector(".modal-quiz-container");
+          let modalQuizContainer = this.el.shadowRoot.querySelector('.modal-quiz-container');
           if (modalQuizContainer) {
             modalQuizContainer.scrollTo({
               top: 0,
@@ -136,37 +128,24 @@ export class PtcModalQuiz {
   }
   componentDidRender() {
     const modal = document.querySelector(`#${this.modalId}`);
-    const modalCloseButton = modal.shadowRoot.querySelector(".close");
-    modalCloseButton.addEventListener("click", () => {
+    const modalCloseButton = modal.shadowRoot.querySelector('.close');
+    modalCloseButton.addEventListener('click', () => {
       this.resetQuiz();
     });
   }
   render() {
     const ProgressDots = () => {
-      return (h("div", { class: "dot-progress-bar" }, [...Array(this.totalQuestions).keys()].map((questionNumber) => {
-        return (h("div", null, h("div", { class: `dot-progress-circle ${questionNumber === this.currentQuestion - 1 ? "active" : ""}` }), questionNumber <
-          this.totalQuestions - 1 ? (h("div", { class: "dot-progress-dash" }, h("div", { class: "dashed-line" }))) : null));
-      })));
+      return h("div", { class: "dot-progress-bar" }, [...Array(this.totalQuestions).keys()].map(questionNumber => {
+        return h("div", null, h("div", { class: `dot-progress-circle ${(questionNumber === (this.currentQuestion - 1)) ? "active" : ""}` }), (questionNumber < (this.totalQuestions - 1)) ?
+          h("div", { class: "dot-progress-dash" }, h("div", { class: "dashed-line" })) : null);
+      }));
     };
     const PriorityOptions = () => {
-      return (h("div", { class: "options-container" }, h("div", { id: `priority-option-${this.currentQuestion}-1`, class: "radio-input mf-listen", onClick: (e) => this.handlePriorityOptionClick(e, Priority.Low) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `1`, tabIndex: 0 }), h("label", { class: "option-label", htmlFor: `1` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "low-level-label" })))), h("div", { id: `priority-option-${this.currentQuestion}-2`, class: "radio-input mf-listen", onClick: (e) => this.handlePriorityOptionClick(e, Priority.Medium) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `2`, tabIndex: 0 }), h("label", { class: "option-label", htmlFor: `2` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "medium-level-label" })))), h("div", { id: `priority-option-${this.currentQuestion}-3`, class: "radio-input mf-listen", onClick: (e) => this.handlePriorityOptionClick(e, Priority.High) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `3`, tabIndex: 0 }), h("label", { class: "option-label", htmlFor: `3` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "high-level-label" }))))));
+      return h("div", { class: "options-container" }, h("div", { id: `priority-option-${this.currentQuestion}-1`, class: "radio-input mf-listen", onClick: e => this.handlePriorityOptionClick(e, Priority.Low) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `1`, tabIndex: 0 }), h("label", { class: "option-label", htmlFor: `1` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "low-level-label" })))), h("div", { id: `priority-option-${this.currentQuestion}-2`, class: "radio-input mf-listen", onClick: e => this.handlePriorityOptionClick(e, Priority.Medium) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `2`, tabIndex: 0 }), h("label", { class: "option-label", htmlFor: `2` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "medium-level-label" })))), h("div", { id: `priority-option-${this.currentQuestion}-3`, class: "radio-input mf-listen", onClick: e => this.handlePriorityOptionClick(e, Priority.High) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `3`, tabIndex: 0 }), h("label", { class: "option-label", htmlFor: `3` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "high-level-label" })))));
     };
-    return (h(Host, null, h("div", { class: "modal-quiz-container" }, h("div", null, h("div", null, h("div", { class: "modal-quiz-progress" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-4", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "question-text" }), " ", this.currentQuestion, " ", h("slot", { name: "of-text" }), " ", this.totalQuestions), h(ProgressDots, null)), h("div", { class: "modal-quiz-content" }, h("div", { class: "content" }, h("ptc-title", { type: "h2", "text-align": "left", "title-size": "xx-large", "title-color": "gray", upperline: "dotted", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-1", "title-weight": "w-8", "is-plm-hub": "false" }, h("slot", { name: `question-${this.currentQuestion}-title` })), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: `question-${this.currentQuestion}-subtitle` })), h(PriorityOptions, null), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.currentSelectedPriority ? (h("slot", { name: this.getPriorityAnswerSlotName() })) : null), h("div", { class: "modal-quiz-ctas" }, h("ptc-button", { "tracker-id": `question-${this.currentQuestion}-prev`, type: "link", color: "ptc-tertiary", onClick: (e) => this.handlePreviousClick(e), onKeyDown: (e) => this.handlePreviousClick(e), disabled: this.currentQuestion === 1, "tab-nav": this.currentQuestion == 1
-        ? -1
-        : 0, styles: "button{margin-bottom:20px;}" }, h("slot", { name: "previous-ques-text" })), h("ptc-spacer", { size: "large", breakpoint: "x-small" }), this.currentQuestion ===
-      this.totalQuestions ? (h("ptc-button", { "tracker-id": `question-${this.currentQuestion}-email`, type: "link", color: "ptc-secondary", onClick: (e) => this.handleEmailReportClick(e), disabled: this
-        .currentSelectedPriority ==
-        null, styles: "button{margin-bottom:20px;}", "tab-nav": this
-        .currentSelectedPriority ==
-        null
-        ? -1
-        : 0 }, h("slot", { name: "email-results-text" }))) : (h("ptc-button", { "tracker-id": `question-${this.currentQuestion}-next`, type: "link", color: "ptc-secondary", onClick: (e) => this.handleNextClick(e), onKeyDown: (e) => this.handleNextClick(e), disabled: this
-        .currentSelectedPriority ==
-        null, styles: "button{margin-bottom:20px;}", "tab-nav": this
-        .currentSelectedPriority ==
-        null
-        ? -1
-        : 0 }, h("slot", { name: "next-ques-text" }))))), h("div", { class: "image" }, h("slot", { name: `question-${this.currentQuestion}-image` })))))), h("slot", { name: "script" })));
+    return (h(Host, null, h("div", { class: "modal-quiz-container" }, h("div", null, h("div", null, h("div", { class: "modal-quiz-progress" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-4", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "question-text" }), " ", this.currentQuestion, " ", h("slot", { name: "of-text" }), " ", this.totalQuestions), h(ProgressDots, null)), h("div", { class: "modal-quiz-content" }, h("div", { class: "content" }, h("ptc-title", { type: "h2", "text-align": "left", "title-size": "xx-large", "title-color": "gray", upperline: "dotted", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-1", "title-weight": "w-8", "is-plm-hub": "false" }, h("slot", { name: `question-${this.currentQuestion}-title` })), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: `question-${this.currentQuestion}-subtitle` })), h(PriorityOptions, null), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, (this.currentSelectedPriority) ? h("slot", { name: this.getPriorityAnswerSlotName() }) : null), h("div", { class: "modal-quiz-ctas" }, h("ptc-button", { "tracker-id": `question-${this.currentQuestion}-prev`, type: "link", color: "ptc-tertiary", onClick: (e) => this.handlePreviousClick(e), onKeyDown: (e) => this.handlePreviousClick(e), disabled: (this.currentQuestion === 1), "tab-nav": this.currentQuestion == 1 ? -1 : 0, styles: "button{margin-bottom:20px;}" }, h("slot", { name: "previous-ques-text" })), h("ptc-spacer", { size: "large", breakpoint: "x-small" }), (this.currentQuestion === this.totalQuestions) ?
+      h("ptc-button", { "tracker-id": `question-${this.currentQuestion}-email`, type: "link", color: "ptc-secondary", onClick: e => this.handleEmailReportClick(e), disabled: this.currentSelectedPriority == null, styles: "button{margin-bottom:20px;}", "tab-nav": this.currentSelectedPriority == null ? -1 : 0 }, h("slot", { name: "email-results-text" })) :
+      h("ptc-button", { "tracker-id": `question-${this.currentQuestion}-next`, type: "link", color: "ptc-secondary", onClick: e => this.handleNextClick(e), onKeyDown: e => this.handleNextClick(e), disabled: this.currentSelectedPriority == null, styles: "button{margin-bottom:20px;}", "tab-nav": this.currentSelectedPriority == null ? -1 : 0 }, h("slot", { name: "next-ques-text" })))), h("div", { class: "image" }, h("slot", { name: `question-${this.currentQuestion}-image` })))))), h("slot", { name: "script" })));
   }
   static get is() { return "ptc-modal-quiz"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-multi-select/ptc-multi-select.css

@@ -9,10 +9,8 @@ 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;
@@ -31,10 +29,8 @@ 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 */
@@ -68,7 +64,7 @@ ptc-footer {
   position: absolute;
   width: calc(100% + 16px);
   height: calc(100% + 8px);
-  background: #fef3f3;
+  background: #FEF3F3;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -81,7 +77,7 @@ ptc-footer {
   z-index: 2;
   opacity: 1;
   position: relative;
-  color: #af3231;
+  color: #AF3231;
   font-family: var(--ptc-font-latin);
   font-size: var(--ptc-font-size-xx-small);
   font-style: normal;
@@ -103,7 +99,7 @@ ptc-footer {
   margin-bottom: var(--ptc-element-spacing-01);
   z-index: 1;
   position: relative;
-  color: #40434a;
+  color: #40434A;
 }
 .ptc-multi-select .selected-items {
   cursor: pointer;

package/dist/collection/components/ptc-multi-select/ptc-multi-select.js

@@ -1,6 +1,6 @@
-import { h, Host, } from "@stencil/core";
-import { ValidationMessages } from "../../utils/validation-messages";
-import { getLanguageFromURL } from "../../utils/utils";
+import { h, Host } from '@stencil/core';
+import { ValidationMessages } from '../../utils/validation-messages';
+import { getLanguageFromURL } from '../../utils/utils';
 export class PtcMultiSelect {
   constructor() {
     this.handleBlur = () => {
@@ -20,85 +20,47 @@ export class PtcMultiSelect {
     this.selectAllItems = (event) => {
       event.preventDefault();
       event.stopPropagation();
-      this.items = this.items.map((item) => (Object.assign(Object.assign({}, item), { selected: true })));
+      this.items = this.items.map(item => (Object.assign(Object.assign({}, item), { selected: true })));
       this.selectedItemsCount = this.items.length;
       this.updateValidity();
     };
     this.clearSelectedItems = (event) => {
       event.preventDefault();
       event.stopPropagation();
-      this.items = this.items.map((item) => (Object.assign(Object.assign({}, item), { selected: false })));
+      this.items = this.items.map(item => (Object.assign(Object.assign({}, item), { selected: false })));
       this.selectedItemsCount = 0;
       this.updateValidity();
     };
     this.items = [
       // Initialize with your items, setting 'selected' to false
-      {
-        text: "Lorem Ipsum dolor sit amet",
-        selected: false,
-        ptcDataEloquaName: "data-eloqua-name",
-        ptcDataTargetEloquaName: "data-target-eloqua-name",
-      },
-      {
-        text: "Consectetur adipiscing elit",
-        selected: false,
-        ptcDataEloquaName: "data-eloqua-name",
-        ptcDataTargetEloquaName: "data-target-eloqua-name",
-      },
-      {
-        text: "Sed do eiusmod tempor",
-        selected: false,
-        ptcDataEloquaName: "data-eloqua-name",
-        ptcDataTargetEloquaName: "data-target-eloqua-name",
-      },
-      {
-        text: "Incididunt ut labore",
-        selected: false,
-        ptcDataEloquaName: "data-eloqua-name",
-        ptcDataTargetEloquaName: "data-target-eloqua-name",
-      },
-      {
-        text: "Et dolore magna aliqua",
-        selected: false,
-        ptcDataEloquaName: "data-eloqua-name",
-        ptcDataTargetEloquaName: "data-target-eloqua-name",
-      },
-      {
-        text: "Duis aute irure dolor",
-        selected: false,
-        ptcDataEloquaName: "data-eloqua-name",
-        ptcDataTargetEloquaName: "data-target-eloqua-name",
-      },
-      {
-        text: "In reprehenderit in voluptate",
-        selected: false,
-        ptcDataEloquaName: "data-eloqua-name",
-        ptcDataTargetEloquaName: "data-target-eloqua-name",
-      },
+      { text: 'Lorem Ipsum dolor sit amet', selected: false, ptcDataEloquaName: 'data-eloqua-name', ptcDataTargetEloquaName: 'data-target-eloqua-name' },
+      { text: 'Consectetur adipiscing elit', selected: false, ptcDataEloquaName: 'data-eloqua-name', ptcDataTargetEloquaName: 'data-target-eloqua-name' },
+      { text: 'Sed do eiusmod tempor', selected: false, ptcDataEloquaName: 'data-eloqua-name', ptcDataTargetEloquaName: 'data-target-eloqua-name' },
+      { text: 'Incididunt ut labore', selected: false, ptcDataEloquaName: 'data-eloqua-name', ptcDataTargetEloquaName: 'data-target-eloqua-name' },
+      { text: 'Et dolore magna aliqua', selected: false, ptcDataEloquaName: 'data-eloqua-name', ptcDataTargetEloquaName: 'data-target-eloqua-name' },
+      { text: 'Duis aute irure dolor', selected: false, ptcDataEloquaName: 'data-eloqua-name', ptcDataTargetEloquaName: 'data-target-eloqua-name' },
+      { text: 'In reprehenderit in voluptate', selected: false, ptcDataEloquaName: 'data-eloqua-name', ptcDataTargetEloquaName: 'data-target-eloqua-name' },
     ];
-    this.label = "label";
-    this.selectAllText = "Select All";
-    this.clearAllText = "Clear Selected Items";
+    this.label = 'label';
+    this.selectAllText = 'Select All';
+    this.clearAllText = 'Clear Selected Items';
     this.isRequired = false;
-    this.helpertext = "This field is required";
+    this.helpertext = 'This field is required';
     this.placeholderText = "Please select a company";
     this.showDropdown = false;
-    this.language = "en";
+    this.language = 'en';
     this.isValid = true;
     this.selectedItemsCount = 0;
     this.hasInteracted = false;
-    this.tooltipText = "";
+    this.tooltipText = '';
     this.tooltipVisible = false;
-    this.tooltipPosition = {
-      top: 0,
-      left: 0,
-    };
+    this.tooltipPosition = { top: 0, left: 0 };
     this.focusedItemIndex = -1;
   }
   componentWillLoad() {
     this.language = getLanguageFromURL();
     // Initialize selectedItemsCount based on initial selections
-    this.selectedItemsCount = this.items.filter((item) => item.selected).length;
+    this.selectedItemsCount = this.items.filter(item => item.selected).length;
   }
   componentDidLoad() {
     this.ptcMultiSelectLoaded.emit();
@@ -107,7 +69,7 @@ export class PtcMultiSelect {
     const clickedInside = this.el.contains(event.target);
     if (!clickedInside) {
       this.showDropdown = false;
-      this.selectedItemsCount = this.items.filter((item) => item.selected).length;
+      this.selectedItemsCount = this.items.filter(item => item.selected).length;
       this.updateValidity();
       this.focusedItemIndex = -1;
     }
@@ -121,35 +83,30 @@ export class PtcMultiSelect {
       });
     }
     else {
-      this.selectedItemsCount = this.items.filter((item) => item.selected).length;
+      this.selectedItemsCount = this.items.filter(item => item.selected).length;
       this.updateValidity();
       this.focusedItemIndex = -1;
     }
   }
   async focusToggleButton() {
-    const toggleButton = this.el.querySelector(".selected-items");
+    const toggleButton = this.el.querySelector('.selected-items');
     if (toggleButton) {
       toggleButton.focus();
     }
   }
   toggleItemSelection(index) {
-    this.items = [
-      ...this.items.slice(0, index),
-      Object.assign(Object.assign({}, this.items[index]), { selected: !this.items[index].selected }),
-      ...this.items.slice(index + 1),
-    ];
-    this.selectedItemsCount = this.items.filter((item) => item.selected).length;
+    this.items = [...this.items.slice(0, index), Object.assign(Object.assign({}, this.items[index]), { selected: !this.items[index].selected }), ...this.items.slice(index + 1)];
+    this.selectedItemsCount = this.items.filter(item => item.selected).length;
     this.updateValidity();
   }
   getValidationMessage(type) {
     return ValidationMessages[this.language][type];
   }
   setHelperText() {
-    this.helpertext = this.getValidationMessage("select");
+    this.helpertext = this.getValidationMessage('select');
   }
   showTooltip(event, text) {
-    if (event) {
-    }
+    if (event) { }
     this.tooltipText = text;
     // this.tooltipPosition = {
     //   top: 100, // Adjust as necessary to position above the item
@@ -163,12 +120,12 @@ export class PtcMultiSelect {
   // Keyboard Accessibility Handlers
   handleKeyDownToggle(event) {
     switch (event.key) {
-      case "Enter":
-      case " ":
+      case 'Enter':
+      case ' ':
         event.preventDefault();
         this.toggleDropdown();
         break;
-      case "ArrowDown":
+      case 'ArrowDown':
         event.preventDefault();
         if (!this.showDropdown) {
           this.toggleDropdown();
@@ -177,7 +134,7 @@ export class PtcMultiSelect {
           this.focusNextItem();
         }
         break;
-      case "ArrowUp":
+      case 'ArrowUp':
         event.preventDefault();
         if (!this.showDropdown) {
           this.toggleDropdown();
@@ -191,19 +148,18 @@ export class PtcMultiSelect {
     }
   }
   handleKeyDownItem(event, index) {
-    const isAllSelected = this.selectedItemsCount === this.items.length &&
-      this.items.length > 0;
+    const isAllSelected = this.selectedItemsCount === this.items.length && this.items.length > 0;
     switch (event.key) {
-      case "ArrowDown":
+      case 'ArrowDown':
         event.preventDefault();
         this.focusNextItem();
         break;
-      case "ArrowUp":
+      case 'ArrowUp':
         event.preventDefault();
         this.focusPreviousItem();
         break;
-      case "Enter":
-      case " ":
+      case 'Enter':
+      case ' ':
         event.preventDefault();
         if (index === 0) {
           // First item is "Select All/Clear Selected Items"
@@ -218,7 +174,7 @@ export class PtcMultiSelect {
           this.toggleItemSelection(index - 1);
         }
         break;
-      case "Escape":
+      case 'Escape':
         event.preventDefault();
         this.showDropdown = false;
         this.focusToggleButton();
@@ -272,15 +228,11 @@ export class PtcMultiSelect {
     }
   }
   render() {
-    const selectedItems = this.items.filter((item) => item.selected);
+    const selectedItems = this.items.filter(item => item.selected);
     const selectedItemsCount = selectedItems.length;
     const isAllSelected = selectedItemsCount === this.items.length && this.items.length > 0;
-    const buttonLabel = isAllSelected
-      ? this.clearAllText
-      : this.selectAllText;
-    const buttonAction = isAllSelected
-      ? this.clearSelectedItems
-      : this.selectAllItems;
+    const buttonLabel = isAllSelected ? this.clearAllText : this.selectAllText;
+    const buttonAction = isAllSelected ? this.clearSelectedItems : this.selectAllItems;
     let displayText = `${selectedItemsCount} selected`;
     if (selectedItemsCount === 0) {
       displayText = this.placeholderText;
@@ -288,30 +240,23 @@ export class PtcMultiSelect {
     if (selectedItemsCount === 1) {
       displayText = selectedItems[0].text;
     }
-    return (h(Host, { class: {
-        "ptc-multi-select": true,
-        invalid: !this.isValid,
-        "mf-listen": true,
-      } }, h("label", { class: "multi-select-label", id: `multi-select-label-${this.label}` }, this.label), h("div", { class: "selected-items multi-selected-items", role: "button", "aria-haspopup": "listbox", "aria-expanded": this.showDropdown, "aria-labelledby": `multi-select-label-${this.label}`, tabIndex: 0, onClick: () => this.toggleDropdown(), onKeyDown: (event) => this.handleKeyDownToggle(event) }, h("div", { class: "input-text" }, displayText), h("span", { class: "multi-select-icon" }, h("svg", { class: "multi-arrow-svg", width: "10", height: "10", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("ul", { class: "dropdown" + (this.showDropdown ? " show" : ""), role: "listbox", "aria-labelledby": `multi-select-label-${this.label}`, tabIndex: -1 }, h("li", { id: `multi-select-item-0`, role: "option", "aria-selected": isAllSelected, class: { selected: isAllSelected }, tabIndex: -1, onKeyDown: (event) => this.handleKeyDownItem(event, 0) }, h("button", { onClick: (event) => {
+    return (h(Host, { class: { 'ptc-multi-select': true, 'invalid': !this.isValid, 'mf-listen': true } }, h("label", { class: "multi-select-label", id: `multi-select-label-${this.label}` }, this.label), h("div", { class: "selected-items multi-selected-items", role: "button", "aria-haspopup": "listbox", "aria-expanded": this.showDropdown, "aria-labelledby": `multi-select-label-${this.label}`, tabIndex: 0, onClick: () => this.toggleDropdown(), onKeyDown: (event) => this.handleKeyDownToggle(event) }, h("div", { class: "input-text" }, displayText), h("span", { class: "multi-select-icon" }, h("svg", { class: "multi-arrow-svg", width: "10", height: "10", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("ul", { class: 'dropdown' + (this.showDropdown ? ' show' : ''), role: "listbox", "aria-labelledby": `multi-select-label-${this.label}`, tabIndex: -1 }, h("li", { id: `multi-select-item-0`, role: "option", "aria-selected": isAllSelected, class: { selected: isAllSelected }, tabIndex: -1, onKeyDown: (event) => this.handleKeyDownItem(event, 0) }, h("button", { onClick: (event) => {
         event.preventDefault();
         event.stopPropagation();
         buttonAction(event);
-      }, class: "ddl-click-text" }, buttonLabel)), this.items.map((item, index) => (h("li", { key: index + 1, id: `multi-select-item-${index + 1}`, role: "option", "aria-selected": item.selected, class: { selected: item.selected }, tabIndex: -1, onMouseEnter: (event) => this.checkOverflow(event, item.text), onMouseLeave: () => this.hideTooltip(), onKeyDown: (event) => this.handleKeyDownItem(event, index + 1), onClick: (event) => {
+      }, class: "ddl-click-text" }, buttonLabel)), this.items.map((item, index) => (h("li", { key: index + 1, id: `multi-select-item-${index + 1}`, role: "option", "aria-selected": item.selected, class: { selected: item.selected }, tabIndex: -1, onMouseEnter: event => this.checkOverflow(event, item.text), onMouseLeave: () => this.hideTooltip(), onKeyDown: (event) => this.handleKeyDownItem(event, index + 1), onClick: (event) => {
         event.preventDefault();
         event.stopPropagation();
         this.toggleItemSelection(index);
       } }, h("input", { class: "multi-checkbox", type: "checkbox", id: `checkbox-${index}`, checked: item.selected, "data-eloqua-name": item.ptcDataEloquaName, "data-target-eloqua-name": item.ptcDataTargetEloquaName, required: this.isRequired, onClick: (event) => {
         event.stopPropagation(); // Prevents the dropdown from closing
         this.toggleItemSelection(index);
-      }, onBlur: this.handleBlur }), h("label", { htmlFor: `checkbox-${index}` }, item.text))))), this.tooltipVisible && (h("div", { class: "tooltip", style: {
-        top: `${this.tooltipPosition.top}px`,
-        left: `${this.tooltipPosition.left}px`,
-      } }, this.tooltipText)), h("div", { id: "tbd", class: "mdc-select-helper-text mdc-select-helper-text--validation-msg" }, h("svg", { class: "select-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)));
+      }, onBlur: this.handleBlur }), h("label", { htmlFor: `checkbox-${index}` }, item.text))))), this.tooltipVisible && (h("div", { class: "tooltip", style: { top: `${this.tooltipPosition.top}px`, left: `${this.tooltipPosition.left}px` } }, this.tooltipText)), h("div", { id: "tbd", class: "mdc-select-helper-text mdc-select-helper-text--validation-msg" }, h("svg", { class: "select-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)));
   }
   // Ensure that checkOverflow is inside the class
   checkOverflow(event, text) {
     const target = event.currentTarget;
-    const label = target.querySelector("label");
+    const label = target.querySelector('label');
     if (label && label.scrollHeight > label.clientHeight) {
       this.showTooltip(event, text);
     }
@@ -333,7 +278,7 @@ export class PtcMultiSelect {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Array<{\r\n\t\ttext: string;\r\n\t\tselected: boolean;\r\n\t\tptcDataEloquaName: string;\r\n\t\tptcDataTargetEloquaName: string;\r\n\t}>",
+          "original": "Array<{ text: string; selected: boolean; ptcDataEloquaName: string; ptcDataTargetEloquaName: string }>",
           "resolved": "{ text: string; selected: boolean; ptcDataEloquaName: string; ptcDataTargetEloquaName: string; }[]",
           "references": {
             "Array": {
@@ -347,7 +292,7 @@ export class PtcMultiSelect {
           "tags": [],
           "text": ""
         },
-        "defaultValue": "[\r\n\t\t// Initialize with your items, setting 'selected' to false\r\n\t\t{\r\n\t\t\ttext: \"Lorem Ipsum dolor sit amet\",\r\n\t\t\tselected: false,\r\n\t\t\tptcDataEloquaName: \"data-eloqua-name\",\r\n\t\t\tptcDataTargetEloquaName: \"data-target-eloqua-name\",\r\n\t\t},\r\n\t\t{\r\n\t\t\ttext: \"Consectetur adipiscing elit\",\r\n\t\t\tselected: false,\r\n\t\t\tptcDataEloquaName: \"data-eloqua-name\",\r\n\t\t\tptcDataTargetEloquaName: \"data-target-eloqua-name\",\r\n\t\t},\r\n\t\t{\r\n\t\t\ttext: \"Sed do eiusmod tempor\",\r\n\t\t\tselected: false,\r\n\t\t\tptcDataEloquaName: \"data-eloqua-name\",\r\n\t\t\tptcDataTargetEloquaName: \"data-target-eloqua-name\",\r\n\t\t},\r\n\t\t{\r\n\t\t\ttext: \"Incididunt ut labore\",\r\n\t\t\tselected: false,\r\n\t\t\tptcDataEloquaName: \"data-eloqua-name\",\r\n\t\t\tptcDataTargetEloquaName: \"data-target-eloqua-name\",\r\n\t\t},\r\n\t\t{\r\n\t\t\ttext: \"Et dolore magna aliqua\",\r\n\t\t\tselected: false,\r\n\t\t\tptcDataEloquaName: \"data-eloqua-name\",\r\n\t\t\tptcDataTargetEloquaName: \"data-target-eloqua-name\",\r\n\t\t},\r\n\t\t{\r\n\t\t\ttext: \"Duis aute irure dolor\",\r\n\t\t\tselected: false,\r\n\t\t\tptcDataEloquaName: \"data-eloqua-name\",\r\n\t\t\tptcDataTargetEloquaName: \"data-target-eloqua-name\",\r\n\t\t},\r\n\t\t{\r\n\t\t\ttext: \"In reprehenderit in voluptate\",\r\n\t\t\tselected: false,\r\n\t\t\tptcDataEloquaName: \"data-eloqua-name\",\r\n\t\t\tptcDataTargetEloquaName: \"data-target-eloqua-name\",\r\n\t\t},\r\n\t]"
+        "defaultValue": "[\r\n    // Initialize with your items, setting 'selected' to false\r\n    { text: 'Lorem Ipsum dolor sit amet', selected: false, ptcDataEloquaName: 'data-eloqua-name', ptcDataTargetEloquaName: 'data-target-eloqua-name' },\r\n    { text: 'Consectetur adipiscing elit', selected: false, ptcDataEloquaName: 'data-eloqua-name', ptcDataTargetEloquaName: 'data-target-eloqua-name' },\r\n    { text: 'Sed do eiusmod tempor', selected: false, ptcDataEloquaName: 'data-eloqua-name', ptcDataTargetEloquaName: 'data-target-eloqua-name' },\r\n    { text: 'Incididunt ut labore', selected: false, ptcDataEloquaName: 'data-eloqua-name', ptcDataTargetEloquaName: 'data-target-eloqua-name' },\r\n    { text: 'Et dolore magna aliqua', selected: false, ptcDataEloquaName: 'data-eloqua-name', ptcDataTargetEloquaName: 'data-target-eloqua-name' },\r\n    { text: 'Duis aute irure dolor', selected: false, ptcDataEloquaName: 'data-eloqua-name', ptcDataTargetEloquaName: 'data-target-eloqua-name' },\r\n    { text: 'In reprehenderit in voluptate', selected: false, ptcDataEloquaName: 'data-eloqua-name', ptcDataTargetEloquaName: 'data-target-eloqua-name' },\r\n  ]"
       },
       "label": {
         "type": "string",
@@ -365,7 +310,7 @@ export class PtcMultiSelect {
         },
         "attribute": "label",
         "reflect": false,
-        "defaultValue": "\"label\""
+        "defaultValue": "'label'"
       },
       "selectAllText": {
         "type": "string",
@@ -383,7 +328,7 @@ export class PtcMultiSelect {
         },
         "attribute": "select-all-text",
         "reflect": false,
-        "defaultValue": "\"Select All\""
+        "defaultValue": "'Select All'"
       },
       "clearAllText": {
         "type": "string",
@@ -401,7 +346,7 @@ export class PtcMultiSelect {
         },
         "attribute": "clear-all-text",
         "reflect": false,
-        "defaultValue": "\"Clear Selected Items\""
+        "defaultValue": "'Clear Selected Items'"
       },
       "isRequired": {
         "type": "boolean",
@@ -437,7 +382,7 @@ export class PtcMultiSelect {
         },
         "attribute": "helpertext",
         "reflect": false,
-        "defaultValue": "\"This field is required\""
+        "defaultValue": "'This field is required'"
       },
       "placeholderText": {
         "type": "string",

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

@@ -9,10 +9,8 @@ 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;
@@ -31,10 +29,8 @@ 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 */

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

@@ -1,32 +1,38 @@
-import { Host, h } from "@stencil/core";
+import { Host, h } from '@stencil/core';
 export class PtcNavCard {
   constructor() {
     this.cardType = undefined;
     this.cardHref = undefined;
     this.logoAlt = undefined;
-    this.target = "_self";
+    this.target = '_self';
     this.rel = undefined;
     this.linkTitle = undefined;
     this.cardLogo = undefined;
     this.heading = undefined;
     this.description = undefined;
-    this.windowSize = "mobile";
+    this.windowSize = 'mobile';
     this.trackerId = "";
   }
   handleResize() {
     if (window.innerWidth < 992) {
-      this.windowSize = "mobile";
+      this.windowSize = 'mobile';
     }
     else {
-      this.windowSize = "desktop";
+      this.windowSize = 'desktop';
     }
   }
   componentWillLoad() {
     this.handleResize();
   }
   render() {
-    return (h(Host, { class: this.cardType }, h("div", { class: "nav-card-wrap" }, this.cardType == "links-card" ? (h("div", { class: "links-card-wrap" }, h("h3", null, this.cardHref &&
-      !this.cardHref.startsWith("#") ? (h("a", { id: this.trackerId, href: this.cardHref, title: this.linkTitle, tabIndex: -1, class: "mf-listen" }, this.heading, h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))) : (this.heading)), h("slot", null))) : (h("a", { id: this.trackerId, href: this.cardHref, title: this.linkTitle, tabIndex: -1, class: "media-card-wrap mf-listen" }, this.cardLogo && (h("div", { class: "card-logo" }, h("img", { src: this.cardLogo, alt: this.logoAlt }))), h("div", { class: "card-content" }, h("h4", null, this.heading, this.cardType == "cta-card" && (h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))), this.description && (h("p", null, this.description))))))));
+    return (h(Host, { class: this.cardType }, h("div", { class: "nav-card-wrap" }, this.cardType == 'links-card' ?
+      h("div", { class: "links-card-wrap" }, h("h3", null, (this.cardHref && !(this.cardHref.startsWith('#'))) ?
+        (h("a", { id: this.trackerId, href: this.cardHref, title: this.linkTitle, tabIndex: -1, class: "mf-listen" }, this.heading, h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))) : (this.heading)), h("slot", null))
+      :
+        h("a", { id: this.trackerId, href: this.cardHref, title: this.linkTitle, tabIndex: -1, class: "media-card-wrap mf-listen" }, this.cardLogo &&
+          h("div", { class: "card-logo" }, h("img", { src: this.cardLogo, alt: this.logoAlt })), h("div", { class: "card-content" }, h("h4", null, this.heading, this.cardType == "cta-card" &&
+          h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" }))), this.description &&
+          h("p", null, this.description))))));
   }
   static get is() { return "ptc-nav-card"; }
   static get encapsulation() { return "shadow"; }
@@ -46,7 +52,7 @@ export class PtcNavCard {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "\"media-card\" | \"links-card\" | \"cta-card\"",
+          "original": "'media-card' | 'links-card' | 'cta-card'",
           "resolved": "\"cta-card\" | \"links-card\" | \"media-card\"",
           "references": {}
         },
@@ -111,7 +117,7 @@ export class PtcNavCard {
         },
         "attribute": "target",
         "reflect": false,
-        "defaultValue": "\"_self\""
+        "defaultValue": "'_self'"
       },
       "rel": {
         "type": "string",