@ptcwebops/ptcw-design 6.3.66-beta → 6.3.68-beta

package/dist/cjs/ptc-para.cjs.entry.js

@@ -10,27 +10,27 @@ const ptcParaCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,p
 const PtcPara = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.fontSize = 'x-small';
-    this.fontWeight = 'w-4';
-    this.paraStyle = 'default';
-    this.paraColor = 'primary-grey';
-    this.paraLineH = 'line-height-normal';
+    this.fontSize = "x-small";
+    this.fontWeight = "w-4";
+    this.paraStyle = "default";
+    this.paraColor = "primary-grey";
+    this.paraLineH = "line-height-normal";
     this.paraMargin = undefined;
     this.paraAlign = undefined;
     this.ellipsisLineCutoff = undefined;
     this.paraZIndex = undefined;
     this.styles = undefined;
     this.seoCompatibilityMode = false;
-    this.tooltipZIndex = 'auto';
-    this.tooltipPosition = 'bottom';
-    this.tooltipTheme = 'standard';
+    this.tooltipZIndex = "auto";
+    this.tooltipPosition = "bottom";
+    this.tooltipTheme = "standard";
     this.enableTooltip = false;
     this.maxChars = undefined;
     this.maxLines = undefined;
     this.hideTooltipOnMobile = false;
     this.ismob = undefined;
     this.noOverflow = false;
-    this.tooltipWidth = 'default';
+    this.tooltipWidth = "default";
   }
   // Tooltip Properties ends
   render() {
@@ -44,15 +44,21 @@ const PtcPara = class {
     if (!this.enableTooltip)
       return;
     const trimmedContent = content.trim();
-    const shouldTruncate = (trimmedContent.length > this.maxChars) && !this.maxLines;
-    return shouldTruncate ? `${trimmedContent.slice(0, this.maxChars).trimEnd()}\u00A0\u2026` : trimmedContent;
+    const shouldTruncate = trimmedContent.length > this.maxChars && !this.maxLines;
+    return shouldTruncate
+      ? `${trimmedContent.slice(0, this.maxChars).trimEnd()}\u00A0\u2026`
+      : trimmedContent;
   }
   componentDidLoad() {
     if (this.hideTooltipOnMobile) {
-      this.el.classList.add('hide-tooltip-on-mobile');
+      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 || this.el.textContent;
       this.tooltipText = paraContent.trim();
@@ -60,26 +66,30 @@ const PtcPara = class {
     }
   }
   toggleTitleTooltip(show) {
-    const tooltipClass = 'tooltip-box';
+    const tooltipClass = "tooltip-box";
     const existingTooltip = this.el.querySelector(`.${tooltipClass}`);
-    const text = this.el.shadowRoot.querySelectorAll('.line-clamp-title');
+    const text = this.el.shadowRoot.querySelectorAll(".line-clamp-title");
     let maxLinesShowCheck = false;
     if (text) {
-      text.forEach(t => {
+      text.forEach((t) => {
         maxLinesShowCheck = t.scrollHeight > t.clientHeight;
       });
     }
-    const ifCharExceeds = this.maxChars ? (this.tooltipText.length > this.maxChars) && !this.maxLines : false;
+    const ifCharExceeds = this.maxChars
+      ? this.tooltipText.length > this.maxChars && !this.maxLines
+      : false;
     const ifLinesExceeds = this.maxLines && maxLinesShowCheck;
     if (show && this.enableTooltip) {
-      if (((!existingTooltip && ifCharExceeds) || (!existingTooltip && ifLinesExceeds)) && !this.noOverflow) {
-        const tooltipMarkup = document.createElement('div');
+      if (((!existingTooltip && ifCharExceeds) ||
+        (!existingTooltip && ifLinesExceeds)) &&
+        !this.noOverflow) {
+        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, this.tooltipWidth);
         if (this.hideTooltipOnMobile) {
-          tooltipMarkup.classList.add('hide-tooltip-mobile');
+          tooltipMarkup.classList.add("hide-tooltip-mobile");
         }
         this.el.appendChild(tooltipMarkup);
       }
@@ -104,21 +114,23 @@ const PtcPara = class {
       [this.paraColor]: true,
       [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,
+      ["ellipsis-boxing"]: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
+      ["line-clamp-title"]: this.maxLines && this.maxLines > 0, //tooltip code,
     };
   }
   //WEB-2392
   addWhiteClass() {
-    if (this.paraColor == 'white') {
+    if (this.paraColor == "white") {
       return {
         [this.paraColor]: true,
       };
     }
   }
   getLineCuttoff() {
-    const lineClamp = this.ellipsisLineCutoff > 0 ? this.ellipsisLineCutoff : this.maxLines;
-    return lineClamp > 0 ? { '-webkit-line-clamp': `${lineClamp}` } : {};
+    const lineClamp = this.ellipsisLineCutoff > 0
+      ? this.ellipsisLineCutoff
+      : this.maxLines;
+    return lineClamp > 0 ? { "-webkit-line-clamp": `${lineClamp}` } : {};
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/ptc-picture.cjs.entry.js

@@ -11,24 +11,24 @@ const PtcPicture = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.src = undefined;
-    this.alt = 'image';
-    this.sizeXs = '510x340';
-    this.sizeSm = '1240x496';
-    this.sizeMd = '1366x500';
-    this.sizeLg = '1920x1080';
+    this.alt = "image";
+    this.sizeXs = "510x340";
+    this.sizeSm = "1240x496";
+    this.sizeMd = "1366x500";
+    this.sizeLg = "1920x1080";
     this.disableResize = false;
     this.oldSrc = undefined;
-    this.imagePosition = 'static';
+    this.imagePosition = "static";
     this.borderRadius = undefined;
     this.height = undefined;
     this.width = undefined;
-    this.objectFit = 'cover';
+    this.objectFit = "cover";
     this.isFullHeight = false;
     this.isFullWidth = false;
     this.styles = undefined;
-    this.imageAlignment = 'left';
+    this.imageAlignment = "left";
     this.maxWidth = undefined;
-    this.displayImage = 'block';
+    this.displayImage = "block";
   }
   WindowResize() {
     this.addIntersectionObserver();
@@ -55,17 +55,17 @@ const PtcPicture = class {
     if (!this.src) {
       return;
     }
-    if ('IntersectionObserver' in window) {
-      let lazyLoadImages = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
+    if ("IntersectionObserver" in window) {
+      let lazyLoadImages = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            const image = this.el.shadowRoot.querySelector('img');
+            const image = this.el.shadowRoot.querySelector("img");
             image.src = this.setResponsiveBg();
             lazyLoadImages.unobserve(image);
           }
         });
       });
-      let tempImg = this.el.shadowRoot.querySelector('img');
+      let tempImg = this.el.shadowRoot.querySelector("img");
       if (tempImg) {
         lazyLoadImages.observe(tempImg);
       }
@@ -73,10 +73,10 @@ const PtcPicture = class {
     else {
       // fall back to setTimeout for Safari and IE
       setTimeout(() => {
-        const image = this.el.shadowRoot.querySelector('img');
+        const image = this.el.shadowRoot.querySelector("img");
         image.src = this.setResponsiveBg();
         image.onload = () => {
-          image.removeAttribute('data-src');
+          image.removeAttribute("data-src");
         };
       }, 5000);
     }
@@ -84,17 +84,21 @@ const PtcPicture = class {
   //responsive image
   setResponsiveBg() {
     // Define local variables
-    let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    let backgrounds = (this.el.shadowRoot || document).querySelectorAll("img"), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
     for (var i = 0, len = backgrounds.length; i < len; i++) {
       // Set current variables
       el = backgrounds[i];
-      elData = el.getAttribute('data-' + currentBreakpoint);
+      elData = el.getAttribute("data-" + currentBreakpoint);
       if (elData !== null) {
         return elData;
       }
       else {
-        if (typeof console == 'object') {
-          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
+        if (typeof console == "object") {
+          console.warn("Data attribute: data-" +
+            currentBreakpoint +
+            " not found on element:\n\n" +
+            el.outerHTML +
+            "\n\n\n");
         }
       }
     }
@@ -102,18 +106,20 @@ const PtcPicture = class {
   render() {
     const classMap = this.getCssClassMap();
     const classMapHost = this.getCssClassMapHost();
-    return (index.h(index.Host, { class: classMapHost }, this.styles && index.h("style", null, this.styles), index.h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt, style: Object.assign({}, (!!this.maxWidth ? { maxWidth: this.maxWidth + 'px' } : {})) })), index.h("slot", null)));
+    return (index.h(index.Host, { class: classMapHost }, this.styles && index.h("style", null, this.styles), index.h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt, style: Object.assign({}, (!!this.maxWidth
+        ? { maxWidth: this.maxWidth + "px" }
+        : {})) })), index.h("slot", null)));
   }
   getCurrentBreakPoints() {
     // Define local variables
-    let doc = window.document, temp = doc.createElement('div'), env;
+    let doc = window.document, temp = doc.createElement("div"), env;
     // Append test node
     doc.body.appendChild(temp);
     // Loop through breakpoints
     for (let i = interfaces.ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
       env = interfaces.ResponsivePictureVariables.envs[i];
       // Add classes
-      temp.className = 'hidden-' + env;
+      temp.className = "hidden-" + env;
       // Found breakpoint
       if (temp.offsetParent === null) {
         // Remove our test node
@@ -127,26 +133,26 @@ const PtcPicture = class {
     return this.getFallbackBreakpoint();
   }
   getFallbackBreakpoint() {
-    if (window.matchMedia('(min-width: 992px)').matches) {
-      return 'lg';
+    if (window.matchMedia("(min-width: 992px)").matches) {
+      return "lg";
     }
-    else if (window.matchMedia('(min-width: 768px)').matches) {
-      return 'md';
+    else if (window.matchMedia("(min-width: 768px)").matches) {
+      return "md";
     }
-    else if (window.matchMedia('(min-width: 576px)').matches) {
-      return 'sm';
+    else if (window.matchMedia("(min-width: 576px)").matches) {
+      return "sm";
     }
     else {
-      return 'xs';
+      return "xs";
     }
   }
   getCssClassMap() {
     return {
       [this.borderRadius]: this.borderRadius ? true : false,
       [this.objectFit]: true,
-      [this.isFullHeight ? 'is-full-height' : 'is-normal-height']: true,
-      [this.isFullWidth ? 'is-full-width' : 'is-normal-width']: true,
-      [this.displayImage]: true
+      [this.isFullHeight ? "is-full-height" : "is-normal-height"]: true,
+      [this.isFullWidth ? "is-full-width" : "is-normal-width"]: true,
+      [this.displayImage]: true,
     };
   }
   getCssClassMapHost() {