@ptcwebops/ptcw-design 6.1.28 → 6.1.30

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

@@ -1,6 +1,194 @@
 import { Host, h, Fragment } from '@stencil/core';
 export class PtcEmbeddedQuiz {
   constructor() {
+    /**
+     * Set focus on the first radio option in the current slide of the quiz
+     */
+    this.focusFirstRadio = () => {
+      var _a;
+      let firstRadio = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.radio');
+      if (firstRadio) {
+        firstRadio.focus();
+      }
+    };
+    /**
+     * Handles custom keyboard click events
+     * @param e Event - Only handled if Event is KeyboardEvent
+     * @param callback Function that should be called after processing event
+     * @param idx -1: Restart button | -2: Previous button | -3: Start button | n>=0: Radio options
+     */
+    this.handleKeyClick = (e, callback, idx) => {
+      if (e instanceof KeyboardEvent) {
+        /**
+         * Handles Tab and Shift+Tab operations for the quiz's radio options
+         */
+        const handleOptionTabInOut = () => {
+          var _a, _b;
+          if (e.shiftKey) {
+            let restartButton = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.restart-quiz-button');
+            restartButton && restartButton.focus();
+          }
+          else {
+            let previousButton = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.previous-slide-button');
+            previousButton && previousButton.focus();
+          }
+        };
+        /**
+         * Handles focus setting when quiz is set to final slide
+         */
+        const handleFinalSlideInFocus = () => {
+          var _a, _b, _c;
+          let firstButton = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ptc-button');
+          if (firstButton) {
+            let focusTarget = (_b = firstButton.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('a[tabindex="0"]');
+            if (focusTarget) {
+              focusTarget.focus();
+            }
+          }
+          else {
+            let previousButton = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.previous-slide-button');
+            if (previousButton) {
+              previousButton.focus();
+            }
+          }
+        };
+        /**
+         * Handles Shift+Tab operation on final slide previous button
+         */
+        const handleFinalSlidePreviousFocus = () => {
+          var _a, _b, _c;
+          let ctaButtons = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('ptc-button');
+          if (ctaButtons.length > 0) {
+            let targetButton = ctaButtons[ctaButtons.length - 1];
+            let focusTarget = (_b = targetButton.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('a[tabindex="0"]');
+            if (focusTarget) {
+              focusTarget.focus();
+            }
+          }
+          else {
+            let restartButton = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.restart-quiz-button');
+            if (restartButton) {
+              restartButton.focus();
+            }
+          }
+        };
+        /**
+         * Handles focus setting when the quiz slide is updated
+         */
+        const handleSlideChangeFocus = () => {
+          e.preventDefault();
+          let currentActiveElement = document.activeElement;
+          currentActiveElement.blur();
+          callback();
+          setTimeout(() => {
+            if (this.slide["slide-type"] === "result") {
+              handleFinalSlideInFocus();
+            }
+            else {
+              this.focusFirstRadio();
+            }
+          }, 500);
+        };
+        /**
+         * Handles Arrow operations and focus updates for the quiz's radio options
+         * @param targetIdx Next potential radio button's data-key
+         */
+        const handleArrowFocus = (targetIdx) => {
+          var _a;
+          if (targetIdx === this.slide["options"].length) {
+            targetIdx = 0;
+          }
+          else if (targetIdx < 0) {
+            targetIdx = this.slide["options"].length - 1;
+          }
+          let targetRadio = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.radio[data-key="${targetIdx}"]`);
+          targetRadio && targetRadio.focus();
+        };
+        switch (e.key) {
+          case "Tab": {
+            switch (idx) {
+              case -1: {
+                break;
+              }
+              case -2: {
+                if (e.shiftKey) {
+                  e.preventDefault();
+                  if (this.slide["slide-type"] === "result") {
+                    handleFinalSlidePreviousFocus();
+                  }
+                  else {
+                    this.focusFirstRadio();
+                  }
+                }
+                break;
+              }
+              default: {
+                if (idx >= 0) {
+                  e.preventDefault();
+                  handleOptionTabInOut();
+                }
+                break;
+              }
+            }
+            break;
+          }
+          case " ": {
+            switch (idx) {
+              case -1:
+              case -2: {
+                break;
+              }
+              case -3: {
+                handleSlideChangeFocus();
+                break;
+              }
+              default: {
+                if (idx >= 0) {
+                  handleSlideChangeFocus();
+                }
+                break;
+              }
+            }
+            break;
+          }
+          case "Enter": {
+            switch (idx) {
+              case -1:
+              case -2: {
+                handleSlideChangeFocus();
+                break;
+              }
+              case -3: {
+                handleSlideChangeFocus();
+                break;
+              }
+              default: {
+                if (idx >= 0) {
+                  handleSlideChangeFocus();
+                }
+                break;
+              }
+            }
+            break;
+          }
+          case "ArrowRight":
+          case "ArrowDown": {
+            if (idx >= 0) {
+              handleArrowFocus(idx + 1);
+            }
+            break;
+          }
+          case "ArrowLeft":
+          case "ArrowUp": {
+            if (idx >= 0) {
+              handleArrowFocus(idx - 1);
+            }
+            break;
+          }
+          default: break;
+        }
+      }
+    };
     this.getQuizEndpoint = undefined;
     this.quiz = null;
     this.slide = null;
@@ -61,21 +249,21 @@ export class PtcEmbeddedQuiz {
   }
   render() {
     const QuizSlideRestartButton = () => {
-      return h("div", { class: "right-button-container" }, h("div", { class: "restart-quiz-button", onClick: () => this.handleRestartButtonClick() }, h("icon-asset", { id: "restart-arrow", type: "ptc", size: "small", name: "quiz-arrow-restart" }), 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.restartQuizText || "Restart")));
+      return h("div", { class: "right-button-container" }, h("div", { id: "restart-quiz-button", class: "restart-quiz-button mf-listen", onClick: () => this.handleRestartButtonClick(), onKeyDown: e => this.handleKeyClick(e, () => this.handleRestartButtonClick(), -1), tabIndex: 0 }, h("icon-asset", { id: "restart-arrow", type: "ptc", size: "small", name: "quiz-arrow-restart" }), 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.restartQuizText || "Restart")));
     };
     const QuizSlidePreviousButton = props => {
-      return h("div", { class: "center-button-container" }, h("div", { class: `previous-slide-button ${props.invisible ? "invisible" : ""}`, onClick: () => this.handlePreviousButtonClick() }, h("icon-asset", { id: "left-arrow", type: "ptc", size: "medium", name: "quiz-arrow-left", onClick: () => { } }), 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.previousButtonText || "Previous")));
+      return h("div", { class: "center-button-container" }, h("div", { id: "previous-slide-button", class: `previous-slide-button mf-listen ${props.invisible ? "invisible" : ""}`, onClick: () => this.handlePreviousButtonClick(), onKeyDown: e => this.handleKeyClick(e, () => this.handlePreviousButtonClick(), -2), tabIndex: 0 }, h("icon-asset", { id: "left-arrow", type: "ptc", size: "medium", name: "quiz-arrow-left", onClick: () => { } }), 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.previousButtonText || "Previous")));
     };
     const QuizInitialSlide = () => {
-      return (h("div", { class: "quiz-slide-initial" }, h("div", { class: "quiz-slide-content" }, h("div", { id: "initial-quiz-h2", class: "quiz-slide-text-container" }, h("ptc-title", { type: "h2", "text-align": "center", "title-size": "xx-large", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-8", "is-plm-hub": "false" }, this.slide["h2"])), h("ptc-spacer", { size: 'medium', breakpoint: 'small' }), h("ptc-spacer", { size: 'large', breakpoint: 'x-small' }), h("div", { id: "initial-quiz-h3", class: "quiz-slide-text-container" }, h("ptc-title", { type: "h3", "text-align": "center", "title-size": "large", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false" }, this.slide["h3"])), h("ptc-spacer", { size: 'x-large', breakpoint: 'small' }), h("ptc-spacer", { size: 'xx-large', breakpoint: 'x-small' }), h("div", { id: "initial-quiz-p", class: "quiz-slide-text-container" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-4", "para-align": "center", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.slide["p"])), h("div", { class: "center-button-container" }, h("div", { id: "quiz-start-button", onClick: () => this.handleStartButtonClick() }, h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": "", target: "_blank" }, this.startButtonText || "Start"))))));
+      return (h("div", { class: "quiz-slide-initial" }, h("div", { class: "quiz-slide-content" }, h("div", { id: "initial-quiz-h2", class: "quiz-slide-text-container" }, h("ptc-title", { type: "h2", "text-align": "center", "title-size": "xx-large", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-8", "is-plm-hub": "false" }, this.slide["h2"])), h("ptc-spacer", { size: 'medium', breakpoint: 'small' }), h("ptc-spacer", { size: 'large', breakpoint: 'x-small' }), h("div", { id: "initial-quiz-h3", class: "quiz-slide-text-container" }, h("ptc-title", { type: "h3", "text-align": "center", "title-size": "large", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false" }, this.slide["h3"])), h("ptc-spacer", { size: 'x-large', breakpoint: 'small' }), h("ptc-spacer", { size: 'xx-large', breakpoint: 'x-small' }), h("div", { id: "initial-quiz-p", class: "quiz-slide-text-container" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-4", "para-align": "center", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.slide["p"])), h("div", { class: "center-button-container" }, h("div", { id: "quiz-start-button", onClick: () => this.handleStartButtonClick() }, h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": "", target: "_blank", onKeyDown: e => this.handleKeyClick(e, () => this.handleStartButtonClick(), -3), "tracker-id": "quiz-start-button" }, this.startButtonText || "Start"))))));
     };
     const QuizQuestionSlide = () => {
-      return (h("div", { class: "quiz-slide-question" }, h("div", { class: "quiz-slide-content" }, h("div", { class: "quiz-slide-dual-layout" }, h("div", { class: "image-container" }, h("img", { alt: "", src: this.slide['image'] })), h("div", { class: "content-container" }, h("ptc-title", { type: "h4", "text-align": "left", "title-size": "medium", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false" }, this.slide["question"]), h("div", { class: "options-container" }, this.slide["options"].map(option => {
-        return h("div", { class: "radio-input", onClick: () => this.handleQuestionOptionClick(option["data-model-id"]) }, h("span", { id: `radio-${option["data-model-id"]}`, class: "radio" }), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-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: "" }, option["data-value"]));
+      return (h("div", { class: "quiz-slide-question" }, h("div", { class: "quiz-slide-content" }, h("div", { class: "quiz-slide-dual-layout" }, h("div", { class: "image-container" }, h("img", { alt: "", src: this.slide['image'] })), h("div", { class: "content-container" }, h("ptc-title", { type: "h4", "text-align": "left", "title-size": "medium", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false" }, this.slide["question"]), h("div", { class: "options-container" }, this.slide["options"].map((option, idx) => {
+        return h("div", { id: `option-${option["data-model-id"]}`, class: "radio-input mf-listen", onClick: () => this.handleQuestionOptionClick(option["data-model-id"]), onKeyDown: e => this.handleKeyClick(e, () => this.handleQuestionOptionClick(option["data-model-id"]), idx), "data-key": idx }, h("span", { id: `radio-${option["data-model-id"]}`, class: "radio", tabIndex: 0, "data-key": idx }), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-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: "" }, option["data-value"]));
       })))))));
     };
     const QuizResultSlide = () => {
-      return (h("div", { class: "quiz-slide-result" }, h("div", { class: "quiz-slide-content" }, h("div", { class: "quiz-slide-dual-layout" }, h("div", { class: "image-container" }, h("img", { alt: "", src: this.slide["image"] })), h("div", { class: "content-container" }, h("ptc-title", { type: "h4", "text-align": "left", "title-size": "medium", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false" }, this.slide["title"]), h("ptc-spacer", { size: 'large', breakpoint: 'small' }), h("ptc-spacer", { size: 'x-large', breakpoint: 'x-small' }), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-bottom-6", "para-style": "", "para-z-index": "z-1", styles: "" }, this.slide["description"]), h("div", { class: "cta-container" }, this.slide["cta-quaternary"] && h("ptc-button", { type: "link", target: this.slide["cta-quaternary"]["target"], color: "ptc-quaternary", "link-href": this.slide["cta-quaternary"]["href"] }, this.slide["cta-quaternary"]["text"]), this.slide["cta-tertiary"] && h("ptc-button", { type: "link", target: this.slide["cta-tertiary"]["target"], color: "ptc-tertiary", "link-href": this.slide["cta-tertiary"]["href"] }, this.slide["cta-tertiary"]["text"])))))));
+      return (h("div", { class: "quiz-slide-result" }, h("div", { class: "quiz-slide-content" }, h("div", { class: "quiz-slide-dual-layout" }, h("div", { class: "image-container" }, h("img", { alt: "", src: this.slide["image"] })), h("div", { class: "content-container" }, h("ptc-title", { type: "h4", "text-align": "left", "title-size": "medium", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false" }, this.slide["title"]), h("ptc-spacer", { size: 'large', breakpoint: 'small' }), h("ptc-spacer", { size: 'x-large', breakpoint: 'x-small' }), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-bottom-6", "para-style": "", "para-z-index": "z-1", styles: "" }, this.slide["description"]), h("div", { class: "cta-container" }, this.slide["cta-quaternary"] && h("ptc-button", { type: "link", target: this.slide["cta-quaternary"]["target"], color: "ptc-quaternary", "link-href": this.slide["cta-quaternary"]["href"], "tracker-id": 'final-cta-quaternary' }, this.slide["cta-quaternary"]["text"]), this.slide["cta-tertiary"] && h("ptc-button", { type: "link", target: this.slide["cta-tertiary"]["target"], color: "ptc-tertiary", "link-href": this.slide["cta-tertiary"]["href"], "tracker-id": 'final-cta-tertiary' }, this.slide["cta-tertiary"]["text"])))))));
     };
     const getQuizSlide = () => {
       switch (this.slide["slide-type"]) {

package/dist/collection/components/ptc-featured-list/fl-tab-header/fl-tab-header.js

@@ -50,7 +50,7 @@ export class FlTabHeader {
     });
   }
   render() {
-    return (h(Host, { class: `fl-header ${this.selected ? 'selected' : ''}`, onClick: this.handleClick.bind(this), onKeyDown: this.handleKeyDown.bind(this) }, h("slot", null), h("p", { id: this.trackerId, class: `${this.selected ? 'selected-p' : ''} mf-listen`, tabindex: (this.selected || window.innerWidth < 992) ? 0 : -1 }, h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", description: this.tabTitle, position: "bottom", width: "full-width", theme: "standard", "hide-on-mobile": "false" }))));
+    return (h(Host, { class: `fl-header ${this.selected ? 'selected' : ''}`, onClick: this.handleClick.bind(this), onKeyDown: this.handleKeyDown.bind(this) }, h("slot", null), h("p", { id: this.trackerId, class: `${this.selected ? 'selected-p' : ''} mf-listen`, tabindex: (this.selected || window.innerWidth < 992) ? 0 : -1 }, this.tabTitle)));
   }
   static get is() { return "fl-tab-header"; }
   static get encapsulation() { return "scoped"; }

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

@@ -239,6 +239,9 @@ ptc-footer .footer-bottom ul li, ptc-footer .footer-bottom ol li {
 ptc-footer .footer-bottom .logo {
   margin-bottom: var(--ptc-element-spacing-06);
 }
+ptc-footer .footer-bottom .logo a {
+  display: inline-block;
+}
 ptc-footer .footer-bottom .logo .footer-ptc-logo {
   width: 78px;
   height: 28px;

package/dist/collection/components/ptc-form-checkbox/ptc-form-checkbox.css

@@ -1133,29 +1133,29 @@ ptc-link, ptc-square-card,
 
 .mdc-checkbox {
   transform: translateX(-8px);
-  padding: 8px;
+  padding: calc((34px - 18px) / 2);
   /* @alternate */
   padding: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  margin: 0px;
+  margin: calc((34px - 34px) / 2);
   /* @alternate */
   margin: calc((var(--mdc-checkbox-touch-target-size, 34px) - 34px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__background {
-  top: 8px;
+  top: calc((34px - 18px) / 2);
   /* @alternate */
   top: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  left: 8px;
+  left: calc((34px - 18px) / 2);
   /* @alternate */
   left: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__native-control {
-  top: 0px;
+  top: calc((34px - 34px) / 2);
   /* @alternate */
   top: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  right: 0px;
+  right: calc((34px - 34px) / 2);
   /* @alternate */
   right: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  left: 0px;
+  left: calc((34px - 34px) / 2);
   /* @alternate */
   left: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
   width: 34px;

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css

@@ -1101,7 +1101,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.3333333333% - 10.66666666px);
+    width: calc(33.333333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1118,7 +1118,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid.u-col-space-lg .u-3-col {
-    width: calc(33.3333333333% - 21.3333333px);
+    width: calc(33.333333333333% - 21.3333333px);
   }
 }
 

package/dist/collection/components/ptc-pagenation/ptc-pagenation.css

@@ -128,7 +128,7 @@ ptc-link, ptc-square-card,
   width: 1.125rem;
   height: 1.125rem;
   border: 1px solid var(--color-gray-10);
-  border-radius: calc(var(--ptc-border-radius-standard) / 2);
+  border-radius: calc(var(--ptc-border-radius-standard)/2);
   transition: background-color var(--ptc-ease-out) var(--ptc-transition-medium), fill var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium);
 }
 .standard-filter .next-button:hover, .standard-filter .previous-button:hover {

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

@@ -22,6 +22,7 @@ export class PtcPara {
     this.hideTooltipOnMobile = false;
     this.ismob = undefined;
     this.noOverflow = false;
+    this.tooltipWidth = 'default';
   }
   // Tooltip Properties ends
   render() {
@@ -69,7 +70,7 @@ export class PtcPara {
         tooltipMarkup.className = tooltipClass;
         tooltipMarkup.innerText = this.tooltipText;
         tooltipMarkup.style.zIndex = String(this.tooltipZIndex); // Ensures zIndex is a string
-        tooltipMarkup.classList.add(this.tooltipPosition, this.tooltipTheme);
+        tooltipMarkup.classList.add(this.tooltipPosition, this.tooltipTheme, this.tooltipWidth);
         if (this.hideTooltipOnMobile) {
           tooltipMarkup.classList.add('hide-tooltip-mobile');
         }
@@ -97,8 +98,7 @@ export class PtcPara {
       [this.paraLineH]: true,
       [this.paraAlign]: !!this.paraAlign ? true : false,
       ['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
-      ['line-clamp-title']: this.maxLines && this.maxLines > 0,
-      ['tooltip-enabled']: this.enableTooltip
+      ['line-clamp-title']: this.maxLines && this.maxLines > 0, //tooltip code,
     };
   }
   //WEB-2392
@@ -461,6 +461,24 @@ export class PtcPara {
         "attribute": "no-overflow",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "tooltipWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'full-width' | 'default'",
+          "resolved": "\"default\" | \"full-width\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "This will make the width 100% respective to its parent"
+        },
+        "attribute": "tooltip-width",
+        "reflect": false,
+        "defaultValue": "'default'"
       }
     };
   }

package/dist/collection/components/ptc-pricing-add-on-card/ptc-pricing-add-on-card.js

@@ -11,7 +11,7 @@ export class PtcPricingAddOnCard {
   render() {
     return (h(Host, null, h("div", { class: "add-on-card" }, h("ptc-title", { type: "h4", "text-align": "left", "title-size": "medium", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, this.cardTitle), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("slot", { name: "card-pricing" })), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-align": "left", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, (this.el.querySelector('[slot="card-body"]').innerHTML.toString().length <= 300) ?
       h("slot", { name: "card-body" }) :
-      h("ptc-readmore", { "more-text": "More", "less-text": "Less" }, h("slot", { name: "card-body" })), h("slot", { name: "card-body" })), this.cardCtaHref && this.cardCtaText && h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-small" }), h("ptc-button", { class: "mf-listen", type: "link", color: "ptc-tertiary", "link-href": this.cardCtaHref, target: this.cardCtaTarget }, h("ptc-tooltip", { "text-display": "inline", "max-length": "30", "z-index": "z-2", description: this.cardCtaText, position: "bottom" }))), this.cardDisclaimer && h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-para", { "font-size": "xx-small", "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, (this.cardDisclaimer.length <= 150) ? h("slot", { name: "card-disclaimer" }) : h("ptc-readmore", { "more-text": "More", "less-text": "Less" }, h("slot", { name: "card-disclaimer" })))))));
+      h("ptc-readmore", { "more-text": "More", "less-text": "Less" }, h("slot", { name: "card-body" })), h("slot", { name: "card-body" })), this.cardCtaHref && this.cardCtaText && h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-small" }), h("ptc-button", { class: "mf-listen", type: "link", color: "ptc-tertiary", "link-href": this.cardCtaHref, target: this.cardCtaTarget }, this.cardCtaText)), this.cardDisclaimer && h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-para", { "font-size": "xx-small", "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, (this.cardDisclaimer.length <= 150) ? h("slot", { name: "card-disclaimer" }) : h("ptc-readmore", { "more-text": "More", "less-text": "Less" }, h("slot", { name: "card-disclaimer" })))))));
   }
   static get is() { return "ptc-pricing-add-on-card"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css

@@ -1046,7 +1046,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.3333333333% - 10.66666666px);
+    width: calc(33.333333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1063,7 +1063,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid.u-col-space-lg .u-3-col {
-    width: calc(33.3333333333% - 21.3333333px);
+    width: calc(33.333333333333% - 21.3333333px);
   }
 }
 

package/dist/collection/components/ptc-product-category/ptc-product-category.css

@@ -150,4 +150,135 @@ a:focus-visible {
 }
 :host .category-header {
   margin-bottom: var(--ptc-layout-spacing-03);
+}
+:host .tooltip-box {
+  visibility: visible;
+  padding: 8px;
+  color: var(--color-white);
+  font-size: var(--ptc-font-size-xxx-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  background-color: var(--color-gray-09);
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
+  border: none;
+  border-radius: var(--ptc-border-radius-standard);
+  width: auto;
+  height: auto;
+  text-align: left;
+  text-shadow: none;
+  white-space: normal;
+  position: absolute;
+  z-index: 999;
+  line-height: 1.5;
+}
+@media only screen and (min-width: 480px) {
+  :host .tooltip-box {
+    width: 273px;
+  }
+}
+:host .tooltip-box.hide-tooltip-mobile {
+  display: none !important;
+}
+@media only screen and (min-width: 768px) {
+  :host .tooltip-box.hide-tooltip-mobile {
+    display: block !important;
+  }
+}
+:host .tooltip-box.full-width {
+  width: 100%;
+}
+:host .tooltip-box::after {
+  content: "";
+  position: absolute;
+}
+:host .tooltip-box.bottom {
+  bottom: -12px;
+  transform: translateY(100%);
+}
+:host .tooltip-box.bottom::after {
+  top: 1px;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  border: 8px solid transparent;
+  border-bottom: 8px solid var(--color-gray-09);
+}
+:host .tooltip-box.left {
+  bottom: -12px;
+  transform: translate(-80%, 100%);
+}
+:host .tooltip-box.left::after {
+  top: 1px;
+  right: 8px;
+  transform: translateY(-100%);
+  border: 8px solid transparent;
+  border-bottom: 8px solid var(--color-gray-09);
+}
+:host .tooltip-box.right {
+  bottom: -12px;
+  transform: translateY(100%);
+  right: 0px;
+}
+@-moz-document url-prefix() {
+  :host .tooltip-box.right {
+    right: unset !important;
+    bottom: unset !important;
+    transform: translate(60%, 8px) !important;
+  }
+  @media screen and (min-width: 992px) {
+    :host .tooltip-box.right {
+      transform: translate(100%, 8px) !important;
+    }
+  }
+}
+:host .tooltip-box.right::after {
+  top: 1px;
+  left: 8px;
+  transform: translateY(-100%);
+  border: 8px solid transparent;
+  border-bottom: 8px solid var(--color-gray-09);
+}
+:host .tooltip-box.top {
+  top: -8px;
+  transform: translateY(-100%);
+}
+:host .tooltip-box.top::after {
+  left: 50%;
+  bottom: 1px;
+  transform: translate(-50%, 100%);
+  border: 8px solid transparent;
+  border-top: 8px solid var(--color-gray-09);
+}
+:host .tooltip-box.bottom-right {
+  bottom: -12px;
+  transform: translate(100%, 100%);
+}
+:host .tooltip-box.bottom-right::after {
+  top: 1px;
+  left: 10%;
+  transform: translate(-50%, -100%);
+  border: 8px solid transparent;
+  border-bottom: 8px solid var(--color-gray-09);
+}
+:host .tooltip-box.danger {
+  color: var(--color-red-07);
+  font-family: var(--ptc-font-latin);
+  font-weight: var(--ptc-font-weight-semibold);
+  font-size: var(--ptc-font-size-xx-small);
+  line-height: var(--ptc-line-height-p);
+  border: 2px solid var(--color-red-07);
+  border-radius: var(--ptc-border-radius-standard);
+  background-color: var(--color-white);
+  padding: var(--ptc-element-spacing-06);
+}
+:host .tooltip-box.danger a {
+  color: var(--color-hyperlink);
+}
+@media (max-width: 768px) {
+  :host .hide-tooltip-on-mobile h1,
+:host .hide-tooltip-on-mobile h2,
+:host .hide-tooltip-on-mobile h3,
+:host .hide-tooltip-on-mobile h4,
+:host .hide-tooltip-on-mobile h5,
+:host .hide-tooltip-on-mobile h6 {
+    -webkit-line-clamp: initial !important;
+  }
 }

package/dist/collection/components/ptc-product-category/ptc-product-category.js

@@ -4,7 +4,7 @@ export class PtcProductCategory {
     this.categoryDescription = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "category-header" }, h("slot", { name: "title" }), h("ptc-spacer", { size: "x-small" }), h("ptc-spacer", { size: "x-small", breakpoint: "x-small" }), h("ptc-para", { "para-margin": "margin-flush", "font-size": "small", "para-line-h": "line-height-p", "font-weight": "w-5", "para-z-index": "z-auto" }, h("ptc-tooltip", { "text-display": "block", "text-lines": "9", "z-index": "z-999", description: this.categoryDescription, position: "bottom", width: 'full-width' }))), h("slot", null)));
+    return (h(Host, null, h("div", { class: "category-header" }, h("slot", { name: "title" }), h("ptc-spacer", { size: "x-small" }), h("ptc-spacer", { size: "x-small", breakpoint: "x-small" }), h("ptc-para", { "para-margin": "margin-flush", "font-size": "small", "para-line-h": "line-height-p", "font-weight": "w-5", "para-z-index": "z-auto", "enable-tooltip": true, "max-lines": "9", "tooltip-z-index": "999", "tooltip-width": 'full-width', "seo-compatibility-mode": true }, this.categoryDescription)), h("slot", null)));
   }
   static get is() { return "ptc-product-category"; }
   static get encapsulation() { return "shadow"; }