@ptcwebops/ptcw-design 5.0.0 → 5.0.2

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

@@ -20,6 +20,7 @@ export class PtcButton {
     this.ariaLabel = '';
     this.seoCompatibilityMode = false;
     this.maintainContent = false;
+    this.trackerId = undefined;
   }
   clickEventHandler() {
     this.clickEvent.emit();
@@ -35,14 +36,14 @@ export class PtcButton {
     if (this.maintainContent) {
       this.el.innerHTML = html;
     }
-    return (h(Host, null, this.styles && h("style", null, this.styles), h(TagType, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 }), { title: this.buttonTitle }, (this.ariaLabel !== '' ? { ariaLabel: this.ariaLabel } : {})), h("span", { innerHTML: html }, h("slot", { name: "slot-before-text" }), h("slot", { name: "slot-after-text" })))));
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: "tracker-div" }, h(TagType, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 }), { title: this.buttonTitle }, (this.ariaLabel !== '' ? { ariaLabel: this.ariaLabel } : {})), h("span", { innerHTML: html }, h("slot", { name: "slot-before-text" }), h("slot", { name: "slot-after-text" }))))));
   }
   standardRender() {
     const classMap = this.getCssClassMap();
     const Tag = !!this.linkHref ? 'a' : 'button';
-    return (h(Host, null, this.styles && h("style", null, this.styles), h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 }), { title: this.buttonTitle }, (this.ariaLabel !== '' ? { ariaLabel: this.ariaLabel } : {})), this.iconAnimation == 'reveal-down' ?
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: "tracker-div" }, h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 }), { title: this.buttonTitle }, (this.ariaLabel !== '' ? { ariaLabel: this.ariaLabel } : {})), this.iconAnimation == 'reveal-down' ?
       h("span", null, h("div", { class: "content" }, h("slot", null)), h("div", { class: "icon-wrapper" }, h("div", { class: "icon" }, h("slot", { name: "slot-after-text" })))) :
-      h("span", null, h("slot", { name: "slot-before-text" }), h("slot", null), h("slot", { name: "slot-after-text" })))));
+      h("span", null, h("slot", { name: "slot-before-text" }), h("slot", null), h("slot", { name: "slot-after-text" }))))));
   }
   render() {
     if (this.seoCompatibilityMode) {
@@ -396,6 +397,23 @@ export class PtcButton {
         "attribute": "maintain-content",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "trackerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tracker-id",
+        "reflect": false
       }
     };
   }

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

@@ -289,4 +289,15 @@ p.ellipsis-boxing {
   overflow: hidden;
   text-overflow: ellipsis;
   overflow-wrap: break-word;
+}
+p.line-clamp-title {
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+@media (max-width: 768px) {
+  :host(.hide-tooltip-on-mobile) .line-clamp-title {
+    -webkit-line-clamp: initial !important;
+  }
 }

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

@@ -13,13 +13,62 @@ export class PtcPara {
     this.paraZIndex = undefined;
     this.styles = undefined;
     this.seoCompatibilityMode = false;
+    this.tooltipZIndex = 'auto';
+    this.tooltipPosition = 'bottom';
+    this.tooltipTheme = 'standard';
+    this.enableTooltip = false;
+    this.maxChars = undefined;
+    this.maxLines = undefined;
+    this.hideTooltipOnMobile = false;
+    this.ismob = undefined;
   }
+  // Tooltip Properties ends
   render() {
     if (this.seoCompatibilityMode) {
       seoSlotReset(this.el);
     }
     return this.standardRender();
   }
+  //tooltip code
+  getSortedText(content) {
+    if (!this.enableTooltip)
+      return;
+    const shouldTruncate = (content.length > this.maxChars) && !this.maxLines;
+    return shouldTruncate ? content.slice(0, this.maxChars) + '...' : content;
+  }
+  componentDidLoad() {
+    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));
+    if (this.enableTooltip) {
+      let paraContent = this.el.innerText;
+      this.tooltipText = paraContent;
+      this.el.innerText = this.getSortedText(paraContent);
+    }
+  }
+  toggleTitleTooltip(show) {
+    const tooltipClass = 'tooltip-box';
+    const existingTooltip = this.el.querySelector(`.${tooltipClass}`);
+    if (show && this.enableTooltip) {
+      if (!existingTooltip) {
+        const tooltipMarkup = document.createElement('div');
+        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);
+        if (this.hideTooltipOnMobile) {
+          tooltipMarkup.classList.add('hide-tooltip-mobile');
+        }
+        this.el.appendChild(tooltipMarkup);
+      }
+    }
+    else {
+      existingTooltip === null || existingTooltip === void 0 ? void 0 : existingTooltip.remove();
+    }
+  }
+  //tooltip code ends
   standardRender() {
     const classMap = this.getCssClassMap();
     const colorClass = this.addWhiteClass();
@@ -36,6 +85,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
     };
   }
   //WEB-2392
@@ -47,13 +97,8 @@ export class PtcPara {
     }
   }
   getLineCuttoff() {
-    let result;
-    if (this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0) {
-      result = {
-        ['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`,
-      };
-    }
-    return result;
+    const lineClamp = this.ellipsisLineCutoff > 0 ? this.ellipsisLineCutoff : this.maxLines;
+    return lineClamp > 0 ? { '-webkit-line-clamp': `${lineClamp}` } : {};
   }
   static get is() { return "ptc-para"; }
   static get encapsulation() { return "shadow"; }
@@ -261,8 +306,137 @@ export class PtcPara {
         "attribute": "seo-compatibility-mode",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "tooltipZIndex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "index of hover tooltip element"
+        },
+        "attribute": "tooltip-z-index",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
+      "tooltipPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right' | 'bottom' | 'bottom-right' | 'top'",
+          "resolved": "\"bottom\" | \"bottom-right\" | \"left\" | \"right\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip position"
+        },
+        "attribute": "tooltip-position",
+        "reflect": false,
+        "defaultValue": "'bottom'"
+      },
+      "tooltipTheme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'standard' | 'danger'",
+          "resolved": "\"danger\" | \"standard\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Injected CSS Styles"
+        },
+        "attribute": "tooltip-theme",
+        "reflect": false,
+        "defaultValue": "'standard'"
+      },
+      "enableTooltip": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "enable-tooltip",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "maxChars": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-chars",
+        "reflect": false
+      },
+      "maxLines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-lines",
+        "reflect": false
+      },
+      "hideTooltipOnMobile": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-tooltip-on-mobile",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get states() {
+    return {
+      "ismob": {}
+    };
+  }
   static get elementRef() { return "el"; }
 }

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

@@ -167,7 +167,7 @@ export class PtcTextfield {
   getValidationPattern() {
     let validationPattern = '';
     if ((this.type === 'email' && this.fieldName === 'email') || (this.type === 'email' && this.fieldName === "companyemail")) {
-      validationPattern = "[a-z0-9._%+\\-]+@[a-z0-9.\\-]+\\.(?!.*\\..*\\.)[a-z]{2,15}$"; //updated TLD character limit from 7 to 15
+      validationPattern = "[a-zA-Z0-9._%+\\-]+@[a-zA-Z0-9.\\-]+\\.(?!.*\\..*\\.)[a-zA-Z]{2,15}$"; //updated TLD character limit from 7 to 15
     }
     if (this.fieldName === 'firstname' || this.fieldName === 'lastname') {
       validationPattern = '^[^!*@&$¥£€>#^~+=<>%]+$';

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

@@ -638,4 +638,18 @@ div.block h4,
 div.block h5,
 div.block h6 {
   display: block;
+}
+
+.line-clamp-title {
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+:host {
+  display: block;
+}
+:host div {
+  position: relative;
+  display: inline-block;
 }

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

@@ -16,6 +16,22 @@ export class PtcTitle {
     this.ellipsisLineCutoff = undefined;
     this.titleDisplay = 'inline-block';
     this.seoCompatibilityMode = false;
+    this.tooltipZIndex = 'auto';
+    this.tooltipPosition = 'bottom';
+    this.tooltipTheme = 'standard';
+    this.enableTooltip = false;
+    this.maxChars = undefined;
+    this.maxLines = undefined;
+    this.hideTooltipOnMobile = false;
+    this.ismob = undefined;
+  }
+  // Tooltip Properties ends
+  componentDidLoad() {
+    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));
   }
   render() {
     if (this.seoCompatibilityMode) {
@@ -25,15 +41,46 @@ export class PtcTitle {
       return this.standardRender();
     }
   }
+  getSortedText(content) {
+    if (!this.enableTooltip)
+      return;
+    const shouldTruncate = (content.length > this.maxChars) && !this.maxLines;
+    return shouldTruncate ? content.slice(0, this.maxChars) + '...' : content;
+  }
+  toggleTitleTooltip(show) {
+    var _a;
+    const tooltipClass = 'tooltip-box';
+    const existingTooltip = this.el.querySelector(`.${tooltipClass}`);
+    if (show && this.enableTooltip) {
+      if (!existingTooltip) {
+        const tooltipMarkup = document.createElement('div');
+        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);
+        if (this.hideTooltipOnMobile) {
+          tooltipMarkup.classList.add('hide-tooltip-mobile');
+        }
+        (_a = this.el.querySelector('div')) === null || _a === void 0 ? void 0 : _a.appendChild(tooltipMarkup);
+      }
+    }
+    else {
+      existingTooltip === null || existingTooltip === void 0 ? void 0 : existingTooltip.remove();
+    }
+  }
   seoCompRender() {
     const classMap = this.getCssClassMap();
     const cutOff = this.getLineCuttoff();
     const [TagType, firstChild] = getSeoTagType(this.el, this.type);
-    const html = firstChild && firstChild.innerHTML;
+    let html = firstChild && firstChild.innerHTML;
+    // added for tooltip
+    this.tooltipText = html;
+    let eleText = firstChild && firstChild.innerText;
+    html = this.enableTooltip ? this.getSortedText(eleText) : html;
     if (this.el == firstChild) {
       this.el.innerHTML = '';
     }
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h(TagType, { innerHTML: html, style: cutOff }))));
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h(TagType, { innerHTML: html, style: cutOff, class: this.maxLines && this.maxLines > 0 ? 'line-clamp-title' : '' }))));
   }
   standardRender() {
     const classMap = this.getCssClassMap();
@@ -76,13 +123,8 @@ export class PtcTitle {
     };
   }
   getLineCuttoff() {
-    let result;
-    if (this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0) {
-      result = {
-        ['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`,
-      };
-    }
-    return result;
+    const lineClamp = this.ellipsisLineCutoff > 0 ? this.ellipsisLineCutoff : this.maxLines;
+    return lineClamp > 0 ? { '-webkit-line-clamp': `${lineClamp}` } : {};
   }
   static get is() { return "ptc-title"; }
   static get encapsulation() { return "scoped"; }
@@ -342,8 +384,137 @@ export class PtcTitle {
         "attribute": "seo-compatibility-mode",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "tooltipZIndex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "index of hover tooltip element"
+        },
+        "attribute": "tooltip-z-index",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
+      "tooltipPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right' | 'bottom' | 'bottom-right' | 'top'",
+          "resolved": "\"bottom\" | \"bottom-right\" | \"left\" | \"right\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip position"
+        },
+        "attribute": "tooltip-position",
+        "reflect": false,
+        "defaultValue": "'bottom'"
+      },
+      "tooltipTheme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'standard' | 'danger'",
+          "resolved": "\"danger\" | \"standard\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Injected CSS Styles"
+        },
+        "attribute": "tooltip-theme",
+        "reflect": false,
+        "defaultValue": "'standard'"
+      },
+      "enableTooltip": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "enable-tooltip",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "maxChars": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-chars",
+        "reflect": false
+      },
+      "maxLines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-lines",
+        "reflect": false
+      },
+      "hideTooltipOnMobile": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-tooltip-on-mobile",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get states() {
+    return {
+      "ismob": {}
+    };
+  }
   static get elementRef() { return "el"; }
 }