@ptcwebops/ptcw-design 5.4.2 → 5.4.5

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.js

@@ -5,7 +5,7 @@ export class PtcProductCategory {
     this.categoryDescription = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "category-header" }, h("ptc-title", { type: "h2", upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "xx-large", "title-height": "densest" }, h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-999", description: this.categoryTitle, position: "bottom", width: 'full-width' })), 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("ptc-title", { type: "h2", upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "xx-large", "title-height": "densest" }, this.categoryTitle), 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)));
   }
   static get is() { return "ptc-product-category"; }
   static get encapsulation() { return "shadow"; }

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

@@ -2215,9 +2215,9 @@
 .iti__v-hide {
   visibility: hidden;
 }
-.iti input.iti__tel-input,
-.iti input.iti__tel-input[type=text],
-.iti input.iti__tel-input[type=tel] {
+.iti input,
+.iti input[type=text],
+.iti input[type=tel] {
   position: relative;
   z-index: 0;
   margin-top: 0 !important;
@@ -2256,35 +2256,26 @@
   border-top: none;
   border-bottom: 4px solid #555;
 }
-.iti__dropdown-content {
+.iti__country-list {
   position: absolute;
   z-index: 2;
-  margin-left: -1px;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 0 -1px;
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
   background-color: white;
   border: 1px solid #ccc;
+  white-space: nowrap;
   max-height: 200px;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
-.iti__dropdown-content--dropup {
+.iti__country-list--dropup {
   bottom: 100%;
   margin-bottom: -1px;
 }
-.iti__search-input {
-  width: 100%;
-  border-width: 0;
-}
-.iti__country-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.iti--flexible-dropdown-width .iti__country-list {
-  white-space: nowrap;
-}
 @media (max-width: 500px) {
-  .iti--flexible-dropdown-width .iti__country-list {
+  .iti__country-list {
     white-space: normal;
   }
 }
@@ -2316,20 +2307,20 @@
   margin-right: 0;
   margin-left: 6px;
 }
-.iti--allow-dropdown input.iti__tel-input,
-.iti--allow-dropdown input.iti__tel-input[type=text],
-.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
-.iti--separate-dial-code input.iti__tel-input[type=text],
-.iti--separate-dial-code input.iti__tel-input[type=tel] {
+.iti--allow-dropdown input,
+.iti--allow-dropdown input[type=text],
+.iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
+.iti--separate-dial-code input[type=text],
+.iti--separate-dial-code input[type=tel] {
   padding-right: 6px;
   padding-left: 52px;
   margin-left: 0;
 }
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
-[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
-[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
+[dir=rtl] .iti--allow-dropdown input,
+[dir=rtl] .iti--allow-dropdown input[type=text],
+[dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input,
+[dir=rtl] .iti--separate-dial-code input[type=text],
+[dir=rtl] .iti--separate-dial-code input[type=tel] {
   padding-right: 52px;
   padding-left: 6px;
   margin-right: 0;
@@ -2348,12 +2339,12 @@
 .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
   background-color: rgba(0, 0, 0, 0.05);
 }
-.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
-.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
+.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
+.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
   cursor: default;
 }
-.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
-.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
+.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
+.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
   background-color: transparent;
 }
 .iti--separate-dial-code .iti__selected-flag {
@@ -2377,26 +2368,18 @@
   cursor: pointer;
 }
 
-.iti--fullscreen-popup.iti--container {
-  background-color: rgba(0, 0, 0, 0.5);
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+.iti-mobile .iti--container {
+  top: 30px;
+  bottom: 30px;
+  left: 30px;
+  right: 30px;
   position: fixed;
-  padding: 30px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.iti--fullscreen-popup.iti--container.iti--country-search {
-  justify-content: flex-start;
 }
-.iti--fullscreen-popup .iti__dropdown-content {
+.iti-mobile .iti__country-list {
   max-height: 100%;
-  position: relative;
+  width: 100%;
 }
-.iti--fullscreen-popup .iti__country {
+.iti-mobile .iti__country {
   padding: 10px 10px;
   line-height: 1.5em;
 }
@@ -2422,7 +2405,7 @@
 .iti__flag.iti__va {
   width: 15px;
 }
-@media (min-resolution: 2x) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .iti__flag {
     background-size: 5762px 15px;
   }
@@ -3488,7 +3471,7 @@
   background-color: #dbdbdb;
   background-position: 20px 0;
 }
-@media (min-resolution: 2x) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .iti__flag {
     background-image: url("../img/flags@2x.png?1");
   }

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
       }];
   }
 }