npm - @ptcwebops/ptcw-design - Versions diffs - 6.3.37 → 6.3.38 - Mend

@ptcwebops/ptcw-design 6.3.37 → 6.3.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (856) hide show

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

@@ -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,8 +39,10 @@ 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) => {
@@ -49,11 +51,13 @@ 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();
         }
@@ -63,19 +67,23 @@ 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,
@@ -128,24 +136,37 @@ 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 CHANGED Viewed

@@ -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 */
@@ -64,7 +68,7 @@ ptc-link, ptc-square-card,
   position: absolute;
   width: calc(100% + 16px);
   height: calc(100% + 8px);
-  background: #FEF3F3;
+  background: #fef3f3;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -77,7 +81,7 @@ ptc-link, ptc-square-card,
   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;
@@ -99,7 +103,7 @@ ptc-link, ptc-square-card,
   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 CHANGED Viewed

@@ -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,47 +20,85 @@ 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();
@@ -69,7 +107,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;
     }
@@ -83,30 +121,35 @@ 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
@@ -120,12 +163,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();
@@ -134,7 +177,7 @@ export class PtcMultiSelect {
           this.focusNextItem();
         }
         break;
-      case 'ArrowUp':
+      case "ArrowUp":
         event.preventDefault();
         if (!this.showDropdown) {
           this.toggleDropdown();
@@ -148,18 +191,19 @@ 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"
@@ -174,7 +218,7 @@ export class PtcMultiSelect {
           this.toggleItemSelection(index - 1);
         }
         break;
-      case 'Escape':
+      case "Escape":
         event.preventDefault();
         this.showDropdown = false;
         this.focusToggleButton();
@@ -228,11 +272,15 @@ 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;
@@ -240,23 +288,30 @@ 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);
     }
@@ -278,7 +333,7 @@ export class PtcMultiSelect {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Array<{ text: string; selected: boolean; ptcDataEloquaName: string; ptcDataTargetEloquaName: string }>",
+          "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}>",
           "resolved": "{ text: string; selected: boolean; ptcDataEloquaName: string; ptcDataTargetEloquaName: string; }[]",
           "references": {
             "Array": {
@@ -292,7 +347,7 @@ export class PtcMultiSelect {
           "tags": [],
           "text": ""
         },
-        "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  ]"
+        "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]"
       },
       "label": {
         "type": "string",
@@ -310,7 +365,7 @@ export class PtcMultiSelect {
         },
         "attribute": "label",
         "reflect": false,
-        "defaultValue": "'label'"
+        "defaultValue": "\"label\""
       },
       "selectAllText": {
         "type": "string",
@@ -328,7 +383,7 @@ export class PtcMultiSelect {
         },
         "attribute": "select-all-text",
         "reflect": false,
-        "defaultValue": "'Select All'"
+        "defaultValue": "\"Select All\""
       },
       "clearAllText": {
         "type": "string",
@@ -346,7 +401,7 @@ export class PtcMultiSelect {
         },
         "attribute": "clear-all-text",
         "reflect": false,
-        "defaultValue": "'Clear Selected Items'"
+        "defaultValue": "\"Clear Selected Items\""
       },
       "isRequired": {
         "type": "boolean",
@@ -382,7 +437,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 CHANGED Viewed

@@ -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 */

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

@@ -1,38 +1,32 @@
-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"; }
@@ -52,7 +46,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": {}
         },
@@ -117,7 +111,7 @@ export class PtcNavCard {
         },
         "attribute": "target",
         "reflect": false,
-        "defaultValue": "'_self'"
+        "defaultValue": "\"_self\""
       },
       "rel": {
         "type": "string",