@ptcwebops/ptcw-design 5.4.3 → 5.4.6

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

@@ -8,7 +8,7 @@ export class PtcBackgroundVideo {
     this.playButtonTitle = undefined;
     this.pauseButtonTitle = undefined;
     this.buttonLocation = 'bottom-right';
-    this.buttonTabIndex = false;
+    this.buttonTabIndex = 0;
     this.paused = undefined;
     this.trackerId = undefined;
     this.type = 'default';
@@ -42,7 +42,7 @@ export class PtcBackgroundVideo {
   }
   render() {
     const videoContent = this.isIframe ? (h("div", { class: "iframe-wrapper" }, h("iframe", { id: "jumbotron-iframe", src: this.videoSrc, frameborder: 0, allow: "autoplay", allowFullScreen: true, class: "background-video-embed" }))) : (h("video", { src: this.videoSrc, poster: this.posterSrc, autoplay: true, loop: true, muted: true, playsinline: true }));
-    return (h(Host, { class: this.type }, videoContent, !!this.videoSrc && this.playButtonTitle && (h("div", { class: `play-button ${this.buttonLocation}` }, this.paused && (h("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: this.buttonLocation === "allbp-bottom-right" ? "side-left" : 'bottom-right', styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important; white-space: nowrap}" }, h("div", { id: this.trackerId, class: "tracker-div" }, h("button", { class: 'bg-svg-play', type: "button", tabindex: "0", onClick: e => this.toggleVideoPlay(e), "aria-label": "Video Play button" })))), !this.paused && !!this.pauseButtonTitle && (h("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: this.buttonLocation === "allbp-bottom-right" ? "side-left" : 'bottom-right', styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important; white-space: nowrap}" }, h("div", { id: this.trackerId, class: "tracker-div" }, h("button", { class: "bg-svg-pause", tabindex: "0", type: "button", onClick: e => this.toggleVideoPlay(e), "aria-label": "Video Pause button" })))))), this.overlay ? h("div", { class: `video-overlay ${this.overlayType}` }) : '', this.type == 'default' ? h("slot", null) : ''));
+    return (h(Host, { class: this.type }, videoContent, !!this.videoSrc && this.playButtonTitle && (h("div", { class: `play-button ${this.buttonLocation}` }, this.paused && (h("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: this.buttonLocation === "allbp-bottom-right" ? "side-left" : 'bottom-right', styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important; white-space: nowrap}" }, h("div", { id: this.trackerId, class: "tracker-div" }, h("button", { class: 'bg-svg-play', type: "button", tabindex: this.buttonTabIndex, onClick: e => this.toggleVideoPlay(e), "aria-label": "Video Play button" })))), !this.paused && !!this.pauseButtonTitle && (h("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: this.buttonLocation === "allbp-bottom-right" ? "side-left" : 'bottom-right', styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important; white-space: nowrap}" }, h("div", { id: this.trackerId, class: "tracker-div" }, h("button", { class: "bg-svg-pause", tabindex: this.buttonTabIndex, type: "button", onClick: e => this.toggleVideoPlay(e), "aria-label": "Video Pause button" })))))), this.overlay ? h("div", { class: `video-overlay ${this.overlayType}` }) : '', this.type == 'default' ? h("slot", null) : ''));
   }
   toggleVideoPlay(e) {
     e.preventDefault();
@@ -57,6 +57,20 @@ export class PtcBackgroundVideo {
       }
     }
   }
+  async pauseVideo() {
+    this.paused = true;
+    let video = this.el.shadowRoot.querySelector('video');
+    if (video) {
+      video.pause();
+    }
+  }
+  async playVideo() {
+    this.paused = false;
+    let video = this.el.shadowRoot.querySelector('video');
+    if (video) {
+      video.play().catch(z => console.error(z));
+    }
+  }
   static get is() { return "ptc-background-video"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -194,11 +208,11 @@ export class PtcBackgroundVideo {
         "defaultValue": "'bottom-right'"
       },
       "buttonTabIndex": {
-        "type": "boolean",
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
@@ -209,7 +223,7 @@ export class PtcBackgroundVideo {
         },
         "attribute": "button-tab-index",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "0"
       },
       "trackerId": {
         "type": "string",
@@ -271,5 +285,47 @@ export class PtcBackgroundVideo {
       "paused": {}
     };
   }
+  static get methods() {
+    return {
+      "pauseVideo": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLVideoElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "playVideo": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLVideoElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }

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

@@ -346,8 +346,7 @@ a.center {
 .ptc-tertiary:focus-visible,
 .icon-toggle:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 .ptc-primary span,
 .ptc-quaternary span,
@@ -402,6 +401,15 @@ a.center {
 .icon-toggle.large span {
   font-size: var(--ptc-font-size-large);
 }
+.ptc-primary.acc-alt-style:focus-visible,
+.ptc-quaternary.acc-alt-style:focus-visible,
+.ptc-secondary.acc-alt-style:focus-visible,
+.ptc-tertiary.acc-alt-style:focus-visible,
+.icon-toggle.acc-alt-style:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 .ptc-primary {
   background: var(--color-gray-12);

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

@@ -15,6 +15,7 @@ export class PtcButton {
     this.tabNav = 0;
     this.styles = undefined;
     this.textAlign = undefined;
+    this.enableAccessibilityAltStyle = false;
     this.size = undefined;
     this.buttonTitle = undefined;
     this.ariaLabel = '';
@@ -61,7 +62,8 @@ export class PtcButton {
       ['disabled']: this.disabled ? true : false,
       ['active']: this.active ? true : false,
       [this.textAlign]: true,
-      [this.size]: true
+      [this.size]: true,
+      ['acc-alt-style']: this.enableAccessibilityAltStyle
     };
   }
   static get is() { return "ptc-button"; }
@@ -310,6 +312,24 @@ export class PtcButton {
         "attribute": "text-align",
         "reflect": false
       },
+      "enableAccessibilityAltStyle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable Accessibility Alternate Styling"
+        },
+        "attribute": "enable-accessibility-alt-style",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "size": {
         "type": "string",
         "mutable": false,

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

@@ -392,7 +392,7 @@ ptc-link, ptc-square-card,
 :host(.horizontal-card) .link-wrapper:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 :host(.horizontal-card) .card-media {
   display: flex;
@@ -1022,7 +1022,7 @@ ptc-link, ptc-square-card,
 :host(.case-studies-card) .link-wrapper:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 :host(.case-studies-card) .card-media {
   width: 100%;
@@ -1349,7 +1349,7 @@ ptc-link, ptc-square-card,
 :host(.featured-horizontal-card) .link-wrapper:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 :host(.featured-horizontal-card) .card-media {
   width: 100%;

package/dist/collection/components/ptc-homepage-video-background/ptc-homepage-video-background.css

@@ -330,6 +330,10 @@ ptc-link, ptc-square-card,
 .card-links .card-section .card-link:active .bgp, .card-links .card-section .card-link.active .bgp {
   opacity: 1;
 }
+.card-links .card-section .card-link:focus-visible, .card-links .card-section .card-link:focus, .card-links .card-section .card-link:focus-within {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 .card-links .card-section:before {
   position: absolute;
   width: 32px;
@@ -408,6 +412,11 @@ ptc-link, ptc-square-card,
 .card-section.in-view {
   animation-name: fadeUpInContainer;
 }
+@media only screen and (min-width: 1200px) {
+  .card-section.in-view {
+    overflow: visible !important;
+  }
+}
 .card-section.in-view .card-link {
   animation-name: fadeUpIn;
 }

package/dist/collection/components/ptc-info-tile/ptc-info-tile.css

@@ -180,8 +180,7 @@ ptc-link, ptc-square-card,
 }
 .tile:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 
 ::slotted(img[slot=tile-image]) {

package/dist/collection/components/ptc-info-tile/ptc-info-tile.js

@@ -5,6 +5,7 @@ export class PtcInfoTile {
     this.variant = undefined;
     this.styles = undefined;
     this.trackerId = undefined;
+    this.accessibilityIndex = 0;
   }
   handleClick() {
     this.tileClick.emit();
@@ -30,7 +31,7 @@ export class PtcInfoTile {
   }
   render() {
     const content = (h("div", { class: "tile-content" }, h("span", { class: "tile-title-span" }, h("slot", { name: "tile-title" })), h("div", { class: "tile-title-desc" }, h("slot", { name: "tile-description" }))));
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: `tile ${this.variant}`, onClick: () => this.handleClick(), tabindex: "0" }, this.variant === 'image' && (h("div", { class: "tile-image" }, h("slot", { name: "tile-image" }))), content, this.link && h("a", { href: this.link, class: "link-overlay link-press", tabindex: "-1" }))));
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: `tile ${this.variant}`, onClick: () => this.handleClick(), tabindex: this.accessibilityIndex }, this.variant === 'image' && (h("div", { class: "tile-image" }, h("slot", { name: "tile-image" }))), content, this.link && h("a", { href: this.link, class: "link-overlay link-press", tabindex: "-1" }))));
   }
   static get is() { return "ptc-info-tile"; }
   static get encapsulation() { return "shadow"; }
@@ -113,6 +114,24 @@ export class PtcInfoTile {
         },
         "attribute": "tracker-id",
         "reflect": false
+      },
+      "accessibilityIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "accessibility-index",
+        "reflect": false,
+        "defaultValue": "0"
       }
     };
   }

package/dist/collection/components/ptc-inline-cta/ptc-inline-cta.css

@@ -99,7 +99,7 @@ ptc-link, ptc-square-card,
   padding: 2px;
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 @media only screen and (min-width: 768px) {
   :host .small-inline-cta-container {
@@ -179,7 +179,7 @@ ptc-link, ptc-square-card,
   padding: 2px;
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 @media only screen and (min-width: 480px) {
   :host .big-inline-cta-container .cta-content .cta-body {
@@ -284,7 +284,7 @@ ptc-link, ptc-square-card,
   padding: 2px;
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 @media only screen and (min-width: 768px) {
   :host .bottom-inline-cta-container {

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

@@ -1543,7 +1543,7 @@ a.disabled {
 :host(.blog-jumbotron) .blog-author-name:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 :host(.blog-jumbotron) .image-container {
   background: white;

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

@@ -15,7 +15,7 @@ export class PtcJumbotron {
     this.playButtonTitle = undefined;
     this.pauseButtonTitle = undefined;
     this.buttonLocation = undefined;
-    this.buttonTabIndex = false;
+    this.buttonTabIndex = 0;
     this.contentBackground = undefined;
     this.contentColor = undefined;
     this.textAlign = 'left';
@@ -57,7 +57,7 @@ export class PtcJumbotron {
         break;
       case 'dark-video':
       case 'light-video':
-        mediaElement = (h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle, "button-location": this.buttonLocation, "button-tab-index": "true" }, ' ', this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, ' ', h("slot", { name: "video" }))) : null));
+        mediaElement = (h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle, "button-location": this.buttonLocation, "button-tab-index": this.buttonTabIndex }, ' ', this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, ' ', h("slot", { name: "video" }))) : null));
         break;
       case 'dark':
       case 'light':
@@ -393,22 +393,22 @@ export class PtcJumbotron {
         "reflect": false
       },
       "buttonTabIndex": {
-        "type": "boolean",
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": ""
         },
         "attribute": "button-tab-index",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "0"
       },
       "isTransitioning": {
         "type": "boolean",

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

@@ -220,6 +220,10 @@ ptc-link, ptc-square-card,
   -webkit-transition: none !important;
   -o-transition: none !important;
 }
+:host(.case-study-icon) .case-study-img-anchor:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 @media (min-width: 768px) {
   :host(.case-study-icon) {

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

@@ -52,7 +52,7 @@ export class PtcMediaCard {
       //   : null)}
       style: this.cardType != "case-study-icon" ?
         ((this.isHovered && this.hoverBackgroundImage) ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` }) : {} }, h("slot", { name: "seo-content" }), this.cardType != "case-study-icon" ?
-      (h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())) : null, this.cardType === "case-study-icon" ? (h("div", { id: this.trackerId, class: "tracker-div" }, h("a", { class: "case-study-img-anchor", target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, h("img", { class: "case-study-bg-img", src: this.activeBackgroundImage, alt: this.activeBackgroundImageAlt }), h("div", { class: "after" }), h("img", { class: "case-study-icon-img", src: this.iconImage, alt: this.iconImageAlt }))))
+      (h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())) : null, this.cardType === "case-study-icon" ? (h("div", { id: this.trackerId, class: "tracker-div" }, h("a", { class: "case-study-img-anchor mf-listen", target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, h("img", { class: "case-study-bg-img", src: this.activeBackgroundImage, alt: this.activeBackgroundImageAlt }), h("div", { class: "after" }), h("img", { class: "case-study-icon-img", src: this.iconImage, alt: this.iconImageAlt }))))
       : null));
   }
   getCssClassMap() {

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

@@ -40,10 +40,11 @@ export class PtcPara {
     if (this.hideTooltipOnMobile) {
       this.el.classList.add('hide-tooltip-on-mobile');
     }
-    this.el.addEventListener('mouseenter', () => this.toggleTitleTooltip(true));
-    this.el.addEventListener('mouseleave', () => this.toggleTitleTooltip(false));
+    this.el.addEventListener('mouseenter', () => { this.toggleTitleTooltip(true); });
+    this.el.addEventListener('mouseleave', () => { this.toggleTitleTooltip(false); });
     if (this.enableTooltip) {
-      let paraContent = this.el.innerText;
+      let paraContent = this.el.innerText || this.el.textContent;
+      ;
       this.tooltipText = paraContent;
       this.el.innerText = this.getSortedText(paraContent);
     }
@@ -51,8 +52,17 @@ export class PtcPara {
   toggleTitleTooltip(show) {
     const tooltipClass = 'tooltip-box';
     const existingTooltip = this.el.querySelector(`.${tooltipClass}`);
+    const text = this.el.shadowRoot.querySelectorAll('.line-clamp-title');
+    let maxLinesShowCheck = false;
+    if (text) {
+      text.forEach(t => {
+        maxLinesShowCheck = t.scrollHeight > t.clientHeight;
+      });
+    }
+    const ifCharExceeds = this.maxChars ? (this.tooltipText.length > this.maxChars) && !this.maxLines : false;
+    const ifLinesExceeds = this.maxLines && maxLinesShowCheck;
     if (show && this.enableTooltip) {
-      if (!existingTooltip) {
+      if ((!existingTooltip && ifCharExceeds) || (!existingTooltip && ifLinesExceeds)) {
         const tooltipMarkup = document.createElement('div');
         tooltipMarkup.className = tooltipClass;
         tooltipMarkup.innerText = this.tooltipText;
@@ -73,7 +83,7 @@ export class PtcPara {
     const classMap = this.getCssClassMap();
     const colorClass = this.addWhiteClass();
     const cutOff = this.getLineCuttoff();
-    return (h(Host, { class: `${colorClass} ${this.paraZIndex}` }, this.styles && h("style", null, this.styles), h("p", { class: classMap, part: "part-para", style: cutOff }, h("slot", null))));
+    return (h(Host, { class: `${colorClass} ${this.paraZIndex} trunc-text` }, this.styles && h("style", null, this.styles), h("p", { class: classMap, part: "part-para", style: cutOff }, h("slot", null))));
   }
   getCssClassMap() {
     return {
@@ -85,7 +95,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 code
+      ['line-clamp-title']: this.maxLines && this.maxLines > 0 //tooltip code,
     };
   }
   //WEB-2392

package/dist/collection/components/ptc-social-icons/ptc-social-icons.css

@@ -74,5 +74,5 @@ ptc-link, ptc-square-card,
 :host div a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }

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

@@ -51,8 +51,17 @@ export class PtcTitle {
     var _a;
     const tooltipClass = 'tooltip-box';
     const existingTooltip = this.el.querySelector(`.${tooltipClass}`);
+    const text = this.el.querySelectorAll('.line-clamp-title');
+    let maxLinesShowCheck = false;
+    if (text) {
+      text.forEach(t => {
+        maxLinesShowCheck = t.scrollHeight > t.clientHeight;
+      });
+    }
+    const ifCharExceeds = (this.tooltipText.length > this.maxChars) && !this.maxLines;
+    const ifLinesExceeds = this.maxLines && maxLinesShowCheck;
     if (show && this.enableTooltip) {
-      if (!existingTooltip) {
+      if ((!existingTooltip && ifCharExceeds) || (!existingTooltip && ifLinesExceeds)) {
         const tooltipMarkup = document.createElement('div');
         tooltipMarkup.className = tooltipClass;
         tooltipMarkup.innerText = this.tooltipText;
@@ -76,7 +85,7 @@ export class PtcTitle {
     // added for tooltip
     this.tooltipText = html;
     let eleText = firstChild && firstChild.innerText;
-    html = this.enableTooltip ? this.getSortedText(eleText) : html;
+    html = (this.enableTooltip) ? this.getSortedText(eleText) : html;
     if (this.el == firstChild) {
       this.el.innerHTML = '';
     }

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

@@ -64,6 +64,11 @@ ptc-link, ptc-square-card,
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+@media (max-width: 768px) {
+  .line-clamp.hide-on-mobile {
+    -webkit-line-clamp: initial !important;
+  }
+}
 
 .slot-wrap {
   display: none;

package/dist/collection/components/ptc-tooltip-v3/ptc-tooltip-v3.js

@@ -6,7 +6,7 @@ export class PtcTooltipV3 {
     this.maxLines = undefined;
     this.showTooltip = false;
     this.truncatedContent = '';
-    this.tagType = undefined;
+    this.htmlTagType = undefined;
     this.maxCharEnable = false;
     this.maxLinesEnable = false;
     this.zIndex = 'auto';
@@ -17,6 +17,7 @@ export class PtcTooltipV3 {
     this.hideOnMobile = false;
     this.isSmallScreen = undefined;
     this.hideIfMobile = undefined;
+    this.maxLinesShowCheck = false;
   }
   windowResize() {
     this.isSmallScreen = window.innerWidth < 768;
@@ -41,6 +42,13 @@ export class PtcTooltipV3 {
   getSortedText(content) {
     this.truncatedContent = (this.maxCharEnable && !this.maxLinesEnable && !this.hideIfMobile) ? content.slice(0, this.maxChars) + '...' : content;
   }
+  checkMaxLines() {
+    const appRoot = this.el;
+    const text = appRoot.querySelectorAll('.trunc-text');
+    text.forEach(t => {
+      this.maxLinesShowCheck = t.scrollHeight > t.clientHeight;
+    });
+  }
   componentDidLoad() {
     this.updateContentMarkup();
     // Hide the slot and element from the DOM
@@ -48,21 +56,25 @@ export class PtcTooltipV3 {
     if (slotElement) {
       slotElement.remove();
     }
+    this.checkMaxLines();
   }
   updateContentMarkup() {
     const truncDiv = this.el.querySelector('.trunc-text');
-    if (this.tagType) {
-      truncDiv.innerHTML = `<${this.tagType}>${this.truncatedContent}</${this.tagType}>`;
-    }
-    else {
-      truncDiv.innerHTML = this.truncatedContent;
+    if (truncDiv) {
+      if (this.htmlTagType) {
+        let tagHtml = `<${this.htmlTagType}>${this.truncatedContent}</${this.htmlTagType}>`;
+        truncDiv.innerHTML = tagHtml;
+      }
+      else {
+        truncDiv.innerHTML = this.truncatedContent;
+      }
     }
   }
   toggleTooltip(show) {
     this.showTooltip = show;
   }
   renderTooltip() {
-    return (((this.maxCharEnable && this.showTooltip) || (this.maxLinesEnable && this.showTooltip)) ? (h("div", { class: `tooltip-box ${this.position}`, style: { 'z-index': this.zIndex } }, this.fullContentstring)) : '');
+    return (((this.maxCharEnable && this.showTooltip) || (this.maxLinesEnable && this.showTooltip && this.maxLinesShowCheck)) ? (h("div", { class: `tooltip-box ${this.position}`, style: { 'z-index': this.zIndex }, ref: el => (this.tooltipBox = el) }, this.fullContentstring)) : '');
   }
   render() {
     const classMap = this.getCssClassMap();
@@ -73,7 +85,8 @@ export class PtcTooltipV3 {
   getCssClassMap() {
     return {
       'trunc-text': true,
-      'line-clamp': this.maxLinesEnable
+      'line-clamp': this.maxLinesEnable,
+      'hide-on-mobile': this.hideOnMobile
     };
   }
   getLineCuttoff() {
@@ -132,7 +145,7 @@ export class PtcTooltipV3 {
         "attribute": "max-lines",
         "reflect": false
       },
-      "tagType": {
+      "htmlTagType": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -146,7 +159,7 @@ export class PtcTooltipV3 {
           "tags": [],
           "text": ""
         },
-        "attribute": "tag-type",
+        "attribute": "html-tag-type",
         "reflect": false
       },
       "zIndex": {
@@ -265,7 +278,8 @@ export class PtcTooltipV3 {
       "maxCharEnable": {},
       "maxLinesEnable": {},
       "isSmallScreen": {},
-      "hideIfMobile": {}
+      "hideIfMobile": {},
+      "maxLinesShowCheck": {}
     };
   }
   static get elementRef() { return "el"; }
@@ -276,6 +290,12 @@ export class PtcTooltipV3 {
         "target": "window",
         "capture": false,
         "passive": true
+      }, {
+        "name": "resize",
+        "method": "checkMaxLines",
+        "target": "window",
+        "capture": false,
+        "passive": true
       }];
   }
 }