@ptcwebops/ptcw-design 6.3.37 → 6.3.38

package/dist/esm/ptc-slit-card.entry.js

@@ -5,9 +5,9 @@ const ptcSlitCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-li
 const PtcSlitCard = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.cardType = 'sim-card';
+    this.cardType = "sim-card";
     this.cardHref = undefined;
-    this.target = '_self';
+    this.target = "_self";
     this.rel = undefined;
     this.heading = undefined;
     this.content = undefined;
@@ -15,14 +15,18 @@ const PtcSlitCard = class {
     this.cardImage = undefined;
   }
   render() {
-    const Tag = !!this.cardHref ? 'a' : 'div';
-    return (h(Host, Object.assign({}, (!!this.cardType ? { class: this.cardType } : {})), h(Tag, Object.assign({}, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {}), (!!this.cardImage ? { dataImage: this.cardImage } : {}), { class: "card-link" }), h("slot", { name: "slot-before-heading" }), !!this.heading
+    const Tag = !!this.cardHref ? "a" : "div";
+    return (h(Host, Object.assign({}, (!!this.cardType ? { class: this.cardType } : {})), h(Tag, Object.assign({}, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref
+      ? { target: this.target }
+      : {}), (!!this.rel && !!this.cardHref
+      ? { rel: this.rel }
+      : {}), (!!this.cardImage ? { dataImage: this.cardImage } : {}), { class: "card-link" }), h("slot", { name: "slot-before-heading" }), !!this.heading
       ? [
-        h("div", { class: "card-heading" }, h("div", { class: "card-heading-div" }, h("span", { class: "ptc-h3" }, this.heading), h("div", { class: "sim-arrow-wrapper" }, h("div", { class: "sim-arrow" }))))
+        h("div", { class: "card-heading" }, h("div", { class: "card-heading-div" }, h("span", { class: "ptc-h3" }, this.heading), h("div", { class: "sim-arrow-wrapper" }, h("div", { class: "sim-arrow" })))),
       ]
       : null, !!this.content
       ? [
-        h("div", { class: "card-body" }, h("ptc-para", { "font-size": "xx-small", "font-weight": "w-6", "para-margin": "margin-flush", "para-style": "main", "para-line-h": "line-height-dense" }, this.content))
+        h("div", { class: "card-body" }, h("ptc-para", { "font-size": "xx-small", "font-weight": "w-6", "para-margin": "margin-flush", "para-style": "main", "para-line-h": "line-height-dense" }, this.content)),
       ]
       : null)));
   }

package/dist/esm/ptc-social-icons-footer.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-c83db688.js';
-import { C as CheckDarkFocusState } from './utils-2f12c081.js';
+import { C as CheckDarkFocusState } from './utils-7c68b88a.js';
 import { f as facebookSVG, l as linkedinSVG, x as xSVG } from './x-cd64dee4.js';
 
 const instagramSVG = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -62,14 +62,24 @@ const PtcSocialIconsFooter = class {
   }
   openModal(e) {
     e.preventDefault();
-    const modal = this.hostElement.shadowRoot.querySelector('#QRModal');
+    const modal = this.hostElement.shadowRoot.querySelector("#QRModal");
     modal.show = true;
   }
   componentWillLoad() {
     CheckDarkFocusState(this, this.hostElement);
   }
   render() {
-    return (h(Host, null, h("slot", null), h("ul", { class: this.darkFocusState ? `dark-bg` : `standard-bg` }, this.instagramUrl && h("li", { id: "footerInstagramIconID" }, " ", h("a", { href: this.instagramUrl, title: this.instagramImageAlt, innerHTML: this.instagramImageUrl == "" ? instagramSVG : "", target: this.target }, this.instagramImageUrl != "" && h("img", { src: this.instagramImageUrl, alt: this.instagramImageAlt })), " "), this.facebookUrl && h("li", { id: "footerFacebookIconID" }, " ", h("a", { href: this.facebookUrl, title: this.facebookImageAlt, innerHTML: this.facebookImageUrl == "" ? facebookSVG : "", target: this.target }, this.facebookImageUrl != "" && h("img", { src: this.facebookImageUrl, alt: this.facebookImageAlt })), " "), this.linkedinUrl && h("li", { id: "footerLinkedInIconID" }, " ", h("a", { href: this.linkedinUrl, title: this.linkedinImageAlt, innerHTML: this.linkedinImageUrl == "" ? linkedinSVG : "", target: this.target }, this.linkedinImageUrl != "" && h("img", { src: this.linkedinImageUrl, alt: this.linkedinImageAlt })), " "), this.xUrl && h("li", { id: "footerXIconID" }, " ", h("a", { href: this.xUrl, title: this.xImageAlt, innerHTML: this.xImageUrl == "" ? xSVG : "", target: this.target }, this.xImageUrl != "" && h("img", { src: this.xImageUrl, alt: this.xImageAlt, "aria-label": "X, formerly Twitter" })), " "), this.youtubeUrl && h("li", { id: "footerYouTubeIconID" }, " ", h("a", { href: this.youtubeUrl, title: this.youtubeImageAlt, innerHTML: this.youtubeImageUrl == "" ? youtubeSVG : "", target: this.target }, this.youtubeImageUrl != "" && h("img", { src: this.youtubeImageUrl, alt: this.youtubeImageAlt })), " "), this.weiboUrl && h("li", { id: "footerWeiboIconID" }, " ", h("a", { href: this.weiboUrl, title: this.weiboImageAlt, innerHTML: this.weiboImageUrl == "" ? weiboSVG : "", target: this.target }, this.weiboImageUrl != "" && h("img", { src: this.weiboImageUrl, alt: this.weiboImageAlt })), " "), this.youkuUrl && h("li", { id: "footerYouKuIconID" }, " ", h("a", { href: this.youkuUrl, title: this.youkuImageAlt, innerHTML: this.youkuImageUrl == "" ? ykSVG : "", target: this.target }, this.youkuImageUrl != "" && h("img", { src: this.youkuImageUrl, alt: this.youkuImageAlt })), " "), this.wechatQrImageUrl && h("li", { id: "footerWeChatIconID" }, " ", h("a", { href: "#", onClick: (Event) => { this.openModal(Event); }, title: this.wechatImageAlt != "" ? this.wechatImageAlt : "WeChat", innerHTML: this.wechatImageUrl == "" ? wechatSVG : "" }, this.wechatImageUrl != "" && h("img", { src: this.wechatImageUrl, alt: this.wechatImageAlt })), " ")), h("ptc-modal", { id: "QRModal", show: false, size: "sm", "close-on-blur": true, fixed: true, styles: '.wrapper .modal-popup .modal-body { padding-bottom: 40px}' }, h("ptc-picture", { alt: this.wechatQrImageAltText, src: this.wechatQrImageUrl, "max-width": '250', "image-alignment": 'center', styles: 'img{margin:auto}' }))));
+    return (h(Host, null, h("slot", null), h("ul", { class: this.darkFocusState ? `dark-bg` : `standard-bg` }, this.instagramUrl && (h("li", { id: "footerInstagramIconID" }, " ", h("a", { href: this.instagramUrl, title: this.instagramImageAlt, innerHTML: this.instagramImageUrl == ""
+        ? instagramSVG
+        : "", target: this.target }, this.instagramImageUrl != "" && (h("img", { src: this.instagramImageUrl, alt: this.instagramImageAlt }))), " ")), this.facebookUrl && (h("li", { id: "footerFacebookIconID" }, " ", h("a", { href: this.facebookUrl, title: this.facebookImageAlt, innerHTML: this.facebookImageUrl == ""
+        ? facebookSVG
+        : "", target: this.target }, this.facebookImageUrl != "" && (h("img", { src: this.facebookImageUrl, alt: this.facebookImageAlt }))), " ")), this.linkedinUrl && (h("li", { id: "footerLinkedInIconID" }, " ", h("a", { href: this.linkedinUrl, title: this.linkedinImageAlt, innerHTML: this.linkedinImageUrl == ""
+        ? linkedinSVG
+        : "", target: this.target }, this.linkedinImageUrl != "" && (h("img", { src: this.linkedinImageUrl, alt: this.linkedinImageAlt }))), " ")), this.xUrl && (h("li", { id: "footerXIconID" }, " ", h("a", { href: this.xUrl, title: this.xImageAlt, innerHTML: this.xImageUrl == "" ? xSVG : "", target: this.target }, this.xImageUrl != "" && (h("img", { src: this.xImageUrl, alt: this.xImageAlt, "aria-label": "X, formerly Twitter" }))), " ")), this.youtubeUrl && (h("li", { id: "footerYouTubeIconID" }, " ", h("a", { href: this.youtubeUrl, title: this.youtubeImageAlt, innerHTML: this.youtubeImageUrl == "" ? youtubeSVG : "", target: this.target }, this.youtubeImageUrl != "" && (h("img", { src: this.youtubeImageUrl, alt: this.youtubeImageAlt }))), " ")), this.weiboUrl && (h("li", { id: "footerWeiboIconID" }, " ", h("a", { href: this.weiboUrl, title: this.weiboImageAlt, innerHTML: this.weiboImageUrl == "" ? weiboSVG : "", target: this.target }, this.weiboImageUrl != "" && (h("img", { src: this.weiboImageUrl, alt: this.weiboImageAlt }))), " ")), this.youkuUrl && (h("li", { id: "footerYouKuIconID" }, " ", h("a", { href: this.youkuUrl, title: this.youkuImageAlt, innerHTML: this.youkuImageUrl == "" ? ykSVG : "", target: this.target }, this.youkuImageUrl != "" && (h("img", { src: this.youkuImageUrl, alt: this.youkuImageAlt }))), " ")), this.wechatQrImageUrl && (h("li", { id: "footerWeChatIconID" }, " ", h("a", { href: "#", onClick: (Event) => {
+        this.openModal(Event);
+      }, title: this.wechatImageAlt != ""
+        ? this.wechatImageAlt
+        : "WeChat", innerHTML: this.wechatImageUrl == "" ? wechatSVG : "" }, this.wechatImageUrl != "" && (h("img", { src: this.wechatImageUrl, alt: this.wechatImageAlt }))), " "))), h("ptc-modal", { id: "QRModal", show: false, size: "sm", "close-on-blur": true, fixed: true, styles: ".wrapper .modal-popup .modal-body { padding-bottom: 40px}" }, h("ptc-picture", { alt: this.wechatQrImageAltText, src: this.wechatQrImageUrl, "max-width": "250", "image-alignment": "center", styles: "img{margin:auto}" }))));
   }
   get hostElement() { return getElement(this); }
 };

package/dist/esm/ptc-social-icons.entry.js

@@ -16,11 +16,11 @@ const PtcSocialIcons = class {
     this.linkedinUrl = undefined;
     this.xUrl = undefined;
     this.emailTo = undefined;
-    this.trackerId = 'tracker';
-    this.target = '_blank';
+    this.trackerId = "tracker";
+    this.target = "_blank";
   }
   render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.trackerId }, this.facebookUrl && h("a", { id: `${this.trackerId}-facebook`, class: "mf-listen", href: this.facebookUrl, title: 'Facebook', innerHTML: facebookSVG, target: this.target, "aria-label": "Social share - Facebook" }), this.linkedinUrl && h("a", { id: `${this.trackerId}-linkedin`, class: "mf-listen", href: this.linkedinUrl, title: 'LinkedIn', innerHTML: linkedinSVG, target: this.target, "aria-label": "Social share - LinkedIn" }), this.xUrl && h("a", { id: `${this.trackerId}-x`, class: "mf-listen", href: this.xUrl, title: 'X', innerHTML: xSVG, target: this.target, "aria-label": "Social share - X" }), this.emailTo && h("a", { id: `${this.trackerId}-email`, class: "mf-listen", href: `mailto:${this.emailTo}`, title: 'Email', innerHTML: emailSVG, target: this.target, "aria-label": "Social share - Email" }))));
+    return (h(Host, null, h("slot", null), h("div", { id: this.trackerId }, this.facebookUrl && (h("a", { id: `${this.trackerId}-facebook`, class: "mf-listen", href: this.facebookUrl, title: "Facebook", innerHTML: facebookSVG, target: this.target, "aria-label": "Social share - Facebook" })), this.linkedinUrl && (h("a", { id: `${this.trackerId}-linkedin`, class: "mf-listen", href: this.linkedinUrl, title: "LinkedIn", innerHTML: linkedinSVG, target: this.target, "aria-label": "Social share - LinkedIn" })), this.xUrl && (h("a", { id: `${this.trackerId}-x`, class: "mf-listen", href: this.xUrl, title: "X", innerHTML: xSVG, target: this.target, "aria-label": "Social share - X" })), this.emailTo && (h("a", { id: `${this.trackerId}-email`, class: "mf-listen", href: `mailto:${this.emailTo}`, title: "Email", innerHTML: emailSVG, target: this.target, "aria-label": "Social share - Email" })))));
   }
   get hostEle() { return getElement(this); }
 };

package/dist/esm/ptc-span.entry.js

@@ -5,9 +5,9 @@ const ptcSpanCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,p
 const PtcSpan = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.spanStyle = 'tag-style';
-    this.display = 'inline';
-    this.fontWeight = 'w-4';
+    this.spanStyle = "tag-style";
+    this.display = "inline";
+    this.fontWeight = "w-4";
     this.styles = undefined;
   }
   render() {

package/dist/esm/ptc-square-card.entry.js

@@ -9,7 +9,11 @@ const PtcSquareCard = class {
     this.arrowDirection = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "card-border square-padding card-layout" }, h("slot", { name: "seo-content" }), h("slot", { name: "before-icon" }), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "icon-block" }, !!this.arrowDirection ? (h("icon-asset", Object.assign({ class: "icon" }, (this.arrowDirection === 'up' ? { name: 'arrow_ascending' } : { name: 'arrow_descending' }), { type: "ptc" }, !this.number ? { size: 'xxx-large' } : { size: 'xx-large' }, { color: "ptc-green" }))) : null, !!this.number ? h("div", { class: "number" }, this.number) : null), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("slot", { name: "after-icon" }))));
+    return (h(Host, null, h("div", { class: "card-border square-padding card-layout" }, h("slot", { name: "seo-content" }), h("slot", { name: "before-icon" }), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "icon-block" }, !!this.arrowDirection ? (h("icon-asset", Object.assign({ class: "icon" }, (this.arrowDirection === "up"
+      ? { name: "arrow_ascending" }
+      : { name: "arrow_descending" }), { type: "ptc" }, (!this.number
+      ? { size: "xxx-large" }
+      : { size: "xx-large" }), { color: "ptc-green" }))) : null, !!this.number ? (h("div", { class: "number" }, this.number)) : null), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("slot", { name: "after-icon" }))));
   }
 };
 PtcSquareCard.style = ptcSquareCardCss;

package/dist/esm/ptc-sticky-icons.entry.js

@@ -16,7 +16,7 @@ const PtcStickyIcons = class {
     return (h(Host, null, h("div", { class: "icon-container" }, h("slot", null))));
   }
   setHostLocation() {
-    let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
+    let width = window.innerWidth > 0 ? window.innerWidth : screen.width;
     const detailSection = document.querySelector(".cs-detail-section");
     let currEle = this.el;
     // get the element
@@ -29,7 +29,9 @@ const PtcStickyIcons = class {
         // Code for case study page only
         // Moving sticky icon in the last ptc-section div
         if (detailSection) {
-          const lastSection = detailSection.querySelectorAll('.content-section section.ptc-section').length ? detailSection.querySelectorAll('section.ptc-section')[detailSection.querySelectorAll('section.ptc-section').length - 1] : null;
+          const lastSection = detailSection.querySelectorAll(".content-section section.ptc-section").length
+            ? detailSection.querySelectorAll("section.ptc-section")[detailSection.querySelectorAll("section.ptc-section").length - 1]
+            : null;
           if (lastSection && !lastSection.contains(element)) {
             lastSection.appendChild(currEle);
           }

package/dist/esm/ptc-sticky-section.entry.js

@@ -8,30 +8,30 @@ const PtcStickySection = class {
     this.hasPreloader = false;
   }
   componentDidLoad() {
-    if (document.querySelector('ptc-preloader-section')) {
+    if (document.querySelector("ptc-preloader-section")) {
       this.hasPreloader = true;
-      this.el.setAttribute('has-preloader', 'true');
+      this.el.setAttribute("has-preloader", "true");
     }
     else {
       this.hasPreloader = false;
-      this.el.setAttribute('has-preloader', 'false');
+      this.el.setAttribute("has-preloader", "false");
     }
-    if (this.stickyEl.classList.contains('sticky')) {
-      this.stickyEl.classList.remove('sticky');
+    if (this.stickyEl.classList.contains("sticky")) {
+      this.stickyEl.classList.remove("sticky");
     }
     let that = this;
     if (this.hasPreloader) {
       setTimeout(() => {
-        that.stickyEl = that.el.shadowRoot.querySelector('.stickyEl');
+        that.stickyEl = that.el.shadowRoot.querySelector(".stickyEl");
         that.originalPosition = this.elPosition(that.stickyEl);
-        window.addEventListener('scroll', that.handleScroll);
+        window.addEventListener("scroll", that.handleScroll);
       }, 3100);
     }
     else {
       setTimeout(() => {
-        that.stickyEl = that.el.shadowRoot.querySelector('.stickyEl');
+        that.stickyEl = that.el.shadowRoot.querySelector(".stickyEl");
         that.originalPosition = that.stickyEl.offsetTop;
-        window.addEventListener('scroll', that.handleScroll);
+        window.addEventListener("scroll", that.handleScroll);
       }, 1500);
     }
   }
@@ -41,15 +41,15 @@ const PtcStickySection = class {
     return rect.top + scrollTop;
   }
   disconnectedCallback() {
-    window.removeEventListener('scroll', this.handleScroll);
+    window.removeEventListener("scroll", this.handleScroll);
   }
   handleScroll() {
     if (this.stickyEl) {
       if (window.scrollY > this.originalPosition) {
-        this.stickyEl.classList.add('sticky');
+        this.stickyEl.classList.add("sticky");
       }
       else {
-        this.stickyEl.classList.remove('sticky');
+        this.stickyEl.classList.remove("sticky");
       }
     }
   }
@@ -57,7 +57,7 @@ const PtcStickySection = class {
     this.handleScroll();
   }
   render() {
-    return (h(Host, null, h("div", { class: "stickyEl", ref: el => (this.stickyEl = el) }, h("slot", null))));
+    return (h(Host, null, h("div", { class: "stickyEl", ref: (el) => (this.stickyEl = el) }, h("slot", null))));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/ptc-sticky-title.entry.js

@@ -5,9 +5,9 @@ const ptcStickyTitleCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc
 const PtcStickyTitle = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.barTitle = 'Bar Title';
+    this.barTitle = "Bar Title";
     this.isSticky = false;
-    this.logo = 'logo.png';
+    this.logo = "logo.png";
   }
   handleScroll() {
     const scrollTop = document.documentElement.scrollTop;
@@ -20,22 +20,23 @@ const PtcStickyTitle = class {
     }
   }
   componentDidLoad() {
-    const shareicon = this.hostEl.querySelectorAll('ptc-social-share');
+    const shareicon = this.hostEl.querySelectorAll("ptc-social-share");
     shareicon.forEach((icon, i) => {
-      icon.addEventListener('focus', () => {
-        if ((window.scrollY === 0 && i == 0) || (i == shareicon.length - 1)) {
+      icon.addEventListener("focus", () => {
+        if ((window.scrollY === 0 && i == 0) ||
+          i == shareicon.length - 1) {
           window.scrollBy(0, 262);
         }
         this.isSticky = true;
       });
-      icon.addEventListener('blur', () => {
+      icon.addEventListener("blur", () => {
         this.isSticky = false;
       });
     });
   }
   render() {
     const logoImg = getAssetPath(`./media/${this.logo}`);
-    return (h(Host, null, h("div", { class: `sticky-header-container ${this.isSticky ? 'sticky' : ''}` }, h("div", { class: "sticky-header-title" }, h("div", { class: `logo-image ${this.isSticky ? 'is-visible' : ''}` }, h("img", { src: logoImg })), h("div", { class: "sticky-text" }, h("ptc-tooltip", { "text-lines": "1", description: this.barTitle })), h("div", { class: `share-icons is-flex ${this.isSticky ? 'is-visible' : ''}` }, h("slot", { name: 'social-share-slot' }))), h("ptc-progress-bar", null))));
+    return (h(Host, null, h("div", { class: `sticky-header-container ${this.isSticky ? "sticky" : ""}` }, h("div", { class: "sticky-header-title" }, h("div", { class: `logo-image ${this.isSticky ? "is-visible" : ""}` }, h("img", { src: logoImg })), h("div", { class: "sticky-text" }, h("ptc-tooltip", { "text-lines": "1", description: this.barTitle })), h("div", { class: `share-icons is-flex ${this.isSticky ? "is-visible" : ""}` }, h("slot", { name: "social-share-slot" }))), h("ptc-progress-bar", null))));
   }
   static get assetsDirs() { return ["media"]; }
   get hostEl() { return getElement(this); }

package/dist/esm/ptc-subnav-card.entry.js

@@ -14,7 +14,7 @@ const PtcSubnavCard = class {
     this.target = undefined;
   }
   render() {
-    const Tag = !!this.cardHref ? 'a' : 'div';
+    const Tag = !!this.cardHref ? "a" : "div";
     return (h(Host, null, h(Tag, Object.assign({}, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.cardHref ? { target: this.target } : {})), h("h4", null, this.cardTitle), h("img", { src: this.cardImageSrc, alt: this.cardImageAlt }), h("slot", null), h("h4", { class: "cta" }, this.ctaText, h("icon-asset", { type: "ptc", size: "x-small", name: this.ctaIconAssetName, color: "white" })))));
   }
 };

package/dist/esm/ptc-subnav.entry.js

@@ -5,23 +5,23 @@ const ptcSubnavCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link
 const PtcSubnav = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.mobileTitle = 'See page topics';
+    this.mobileTitle = "See page topics";
     this.navOpen = false;
   }
   toggleNav() {
     this.navOpen = !this.navOpen;
   }
   handleScroll() {
-    let elem = this.el.shadowRoot.querySelector('div.sticky-subnav');
+    let elem = this.el.shadowRoot.querySelector("div.sticky-subnav");
     if (elem) {
-      elem.classList.remove('sticky');
+      elem.classList.remove("sticky");
     }
   }
   handleNavLinkClickedEvent() {
     this.toggleNav();
   }
   render() {
-    return (h(Host, null, h("div", { class: "sticky-subnav" }, h("nav", { class: `navbar ${this.navOpen ? 'navOpen' : ''}` }, h("button", { class: "navbar-toggle", onClick: () => {
+    return (h(Host, null, h("div", { class: "sticky-subnav" }, h("nav", { class: `navbar ${this.navOpen ? "navOpen" : ""}` }, h("button", { class: "navbar-toggle", onClick: () => {
         this.toggleNav();
       } }, this.mobileTitle, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" }))), h("div", { class: "navbar-inner" }, h("div", { class: "nav-wrapper" }, h("slot", { name: "subnav-menu-left" }), h("slot", { name: "subnav-menu-right" })))))));
   }

package/dist/esm/ptc-svg-btn.entry.js

@@ -92,14 +92,16 @@ const ptcSvgBtnCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link
 const PtcSvgBtn = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.svgName = 'close';
-    this.display = 'block';
+    this.svgName = "close";
+    this.display = "block";
     this.zIndex = undefined;
     this.styles = undefined;
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, Object.assign({ class: classMap }, (this.zIndex !== undefined ? { style: { zIndex: this.zIndex } } : null)), this.styles && h("style", null, this.styles), !!this.svgName && this.svgName === 'close' ? h("div", { class: "svg-close", innerHTML: closeSvg }) : null, !!this.svgName && this.svgName === 'slider-left' ? h("div", { class: "slider-left", innerHTML: arrowSvgLeft }) : null, !!this.svgName && this.svgName === 'slider-right' ? h("div", { class: "slider-right", innerHTML: arrowSvgRight }) : null, !!this.svgName && this.svgName === 'back-arrow' ? h("div", { class: "back-arrow", innerHTML: backarrow }) : null, !!this.svgName && this.svgName === 'play' ? h("div", { class: "play", innerHTML: play }) : null));
+    return (h(Host, Object.assign({ class: classMap }, (this.zIndex !== undefined
+      ? { style: { zIndex: this.zIndex } }
+      : null)), this.styles && h("style", null, this.styles), !!this.svgName && this.svgName === "close" ? (h("div", { class: "svg-close", innerHTML: closeSvg })) : null, !!this.svgName && this.svgName === "slider-left" ? (h("div", { class: "slider-left", innerHTML: arrowSvgLeft })) : null, !!this.svgName && this.svgName === "slider-right" ? (h("div", { class: "slider-right", innerHTML: arrowSvgRight })) : null, !!this.svgName && this.svgName === "back-arrow" ? (h("div", { class: "back-arrow", innerHTML: backarrow })) : null, !!this.svgName && this.svgName === "play" ? (h("div", { class: "play", innerHTML: play })) : null));
   }
   getCssClassMap() {
     return {

package/dist/esm/ptc-tab-list.entry.js

@@ -18,87 +18,90 @@ const PtcTabList = class {
   }
   componentWillLoad() {
     this.isMobile = window.innerWidth < 768;
-    this.isMobileTabWithBanner = window.innerWidth < 992 || screen.width < 992;
+    this.isMobileTabWithBanner =
+      window.innerWidth < 992 || screen.width < 992;
   }
   componentDidLoad() {
     this.createGroup();
     this.calculateHeaderTabsRendering();
     /*const [group] = this.tabGroup;
     this.selectGroup(group);*/
-    this.ellipsisDropdown = this.host.querySelector('ptc-ellipsis-dropdown');
-    this.ellipsisDropdown.addEventListener('keydown', this.onKeydown.bind(this));
-    const tabsHeaderEl = Array.from(this.host.querySelectorAll('tab-header'));
+    this.ellipsisDropdown = this.host.querySelector("ptc-ellipsis-dropdown");
+    this.ellipsisDropdown.addEventListener("keydown", this.onKeydown.bind(this));
+    const tabsHeaderEl = Array.from(this.host.querySelectorAll("tab-header"));
     tabsHeaderEl.forEach((tab, i) => {
-      if ((tabsHeaderEl.length - this.dropdownItemsCount) == (i + 1)) {
+      if (tabsHeaderEl.length - this.dropdownItemsCount == i + 1) {
         this.lastVisibleTab = tab;
       }
     });
   }
   onSelectedTab(event) {
     let self = this;
-    this.tabGroup.forEach(group => {
-      event.detail.then(res => {
+    this.tabGroup.forEach((group) => {
+      event.detail.then((res) => {
         if (group.header.name === res.name) {
           self.selectGroup(group);
           // Set the selected tab's tabindex to 0
-          group.header.el.setAttribute('tabindex', '0');
+          group.header.el.setAttribute("tabindex", "0");
           // Focus the selected tab
           group.header.el.focus();
         }
         else {
           // Set other tabs' tabindex to -1
-          group.header.el.setAttribute('tabindex', '-1');
+          group.header.el.setAttribute("tabindex", "-1");
         }
       });
     });
   }
   calculateHeaderTabsRendering() {
-    let header = this.host.querySelector('.tabs-header');
-    let dropdown = this.host.querySelector('.ellipsis-btn');
+    let header = this.host.querySelector(".tabs-header");
+    let dropdown = this.host.querySelector(".ellipsis-btn");
     let tabs = header.children;
     let activateDropDown = false;
     let hiddenTabs = [];
     this.isMobile = window.innerWidth < 768;
-    this.isMobileTabWithBanner = window.innerWidth < 992 || screen.width < 992;
-    header.classList.remove('active');
+    this.isMobileTabWithBanner =
+      window.innerWidth < 992 || screen.width < 992;
+    header.classList.remove("active");
     for (let index = 0; index < tabs.length; index++) {
-      tabs[index].style.removeProperty('display');
+      tabs[index].style.removeProperty("display");
     }
     for (let index = tabs.length - 1; index >= 0; index--) {
       let tab = tabs[index];
-      let isSelectedTab = tab.getAttribute('name') === this.selectedValue;
-      if ((this.isMobile && this.type != 'tab-with-banner') || (this.isMobileTabWithBanner && this.type === 'tab-with-banner')) {
-        let text = tab.querySelector('.text-cont').textContent;
-        header.style.display = 'none';
+      let isSelectedTab = tab.getAttribute("name") === this.selectedValue;
+      if ((this.isMobile && this.type != "tab-with-banner") ||
+        (this.isMobileTabWithBanner && this.type === "tab-with-banner")) {
+        let text = tab.querySelector(".text-cont").textContent;
+        header.style.display = "none";
         activateDropDown = true;
         hiddenTabs.push({
-          value: tab.getAttribute('name'),
+          value: tab.getAttribute("name"),
           text: text,
-          isSelected: isSelectedTab
+          isSelected: isSelectedTab,
         });
       }
       else {
-        header.style.display = 'flex';
+        header.style.display = "flex";
         if (header.scrollWidth > header.clientWidth) {
-          tab.style.display = 'none';
-          let text = tab.querySelector('.text-cont').textContent;
+          tab.style.display = "none";
+          let text = tab.querySelector(".text-cont").textContent;
           activateDropDown = true;
           hiddenTabs.push({
-            value: tab.getAttribute('name'),
+            value: tab.getAttribute("name"),
             text: text,
-            isSelected: isSelectedTab
+            isSelected: isSelectedTab,
           });
         }
       }
     }
-    header.classList.add('active');
+    header.classList.add("active");
     if (activateDropDown) {
-      dropdown.classList.add('active');
+      dropdown.classList.add("active");
       dropdown.dataItems = hiddenTabs.reverse();
       this.dropdownItemsCount = dropdown.dataItems.length;
     }
     else {
-      dropdown.classList.remove('active');
+      dropdown.classList.remove("active");
       dropdown.dataItems = [];
     }
   }
@@ -110,8 +113,8 @@ const PtcTabList = class {
     let contentCount = 0;
     let headerData = [];
     let contentData = [];
-    const tabsHeaderEl = Array.from(this.host.querySelectorAll('tab-header'));
-    this.tabsHeader = tabsHeaderEl.map(el => el.getChild().then(res => {
+    const tabsHeaderEl = Array.from(this.host.querySelectorAll("tab-header"));
+    this.tabsHeader = tabsHeaderEl.map((el) => el.getChild().then((res) => {
       headerCount++;
       if (headerCount === tabsHeaderEl.length) {
         headerComplete = true;
@@ -119,8 +122,8 @@ const PtcTabList = class {
       headerData.push(Object.assign(Object.assign({}, res), { el }));
     }));
     this.tabsHeader = headerData;
-    const tabsContentEl = Array.from(this.host.querySelectorAll('tab-content'));
-    this.tabsContent = tabsContentEl.map(el => el.getChild().then(res => {
+    const tabsContentEl = Array.from(this.host.querySelectorAll("tab-content"));
+    this.tabsContent = tabsContentEl.map((el) => el.getChild().then((res) => {
       contentCount++;
       if (contentCount === tabsContentEl.length) {
         contentComplete = true;
@@ -131,11 +134,11 @@ const PtcTabList = class {
     let myInterval = setInterval(() => {
       if (headerComplete && contentComplete) {
         clearInterval(myInterval);
-        self.tabGroup = self.tabsHeader.map(header => {
-          const content = self.tabsContent.find(content => content.name === header.name);
+        self.tabGroup = self.tabsHeader.map((header) => {
+          const content = self.tabsContent.find((content) => content.name === header.name);
           return {
             header: header,
-            content: content
+            content: content,
           };
         });
         const group = self.tabGroup[0];
@@ -143,29 +146,30 @@ const PtcTabList = class {
       }
     }, 3100); // Increased time interval from 100 to 3100 to fix the preload skeleton issue
     tabsHeaderEl.forEach((header, index) => {
-      header.setAttribute('id', 'tab-' + (index + 1));
-      header.setAttribute('role', 'tab');
-      header.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
-      header.setAttribute('tabindex', index === 0 ? '0' : '-1'); // Set tabindex based on index
-      header.setAttribute('aria-controls', 'tab-panel-' + (index + 1));
-      header.addEventListener('keydown', this.onKeydown.bind(this));
+      header.setAttribute("id", "tab-" + (index + 1));
+      header.setAttribute("role", "tab");
+      header.setAttribute("aria-selected", index === 0 ? "true" : "false");
+      header.setAttribute("tabindex", index === 0 ? "0" : "-1"); // Set tabindex based on index
+      header.setAttribute("aria-controls", "tab-panel-" + (index + 1));
+      header.addEventListener("keydown", this.onKeydown.bind(this));
       if (!this.firstTab) {
         this.firstTab = header;
       }
       this.lastTab = header;
     });
     tabsContentEl.forEach((panel, index) => {
-      panel.setAttribute('id', 'tabpanel-' + (index + 1));
-      panel.setAttribute('role', 'tabpanel');
-      panel.setAttribute('aria-labelledby', 'tab-' + (index + 1));
+      panel.setAttribute("id", "tabpanel-" + (index + 1));
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-labelledby", "tab-" + (index + 1));
     });
   }
   moveFocusToTab(currentTab) {
     currentTab.focus();
   }
   moveFocusToPreviousTab(currentTab) {
-    if (currentTab === this.firstTab || currentTab == this.ellipsisDropdown) {
-      this.ellipsisDropdown.setAttribute('tabindex', '-1');
+    if (currentTab === this.firstTab ||
+      currentTab == this.ellipsisDropdown) {
+      this.ellipsisDropdown.setAttribute("tabindex", "-1");
       if (this.dropdownItemsCount == 0) {
         this.moveFocusToTab(this.lastTab);
       }
@@ -173,28 +177,28 @@ const PtcTabList = class {
         this.moveFocusToTab(this.lastVisibleTab);
       }
       else {
-        this.ellipsisDropdown.setAttribute('tabindex', '0');
+        this.ellipsisDropdown.setAttribute("tabindex", "0");
         this.ellipsisDropdown.focus();
       }
     }
     else {
-      const index = this.tabsHeader.findIndex(tab => tab.el === currentTab);
+      const index = this.tabsHeader.findIndex((tab) => tab.el === currentTab);
       this.moveFocusToTab(this.tabsHeader[index - 1].el);
     }
   }
   moveFocusToNextTab(currentTab) {
-    this.ellipsisDropdown.setAttribute('tabindex', '-1');
+    this.ellipsisDropdown.setAttribute("tabindex", "-1");
     if (currentTab === this.lastTab || currentTab === this.lastVisibleTab) {
       if (this.dropdownItemsCount == 0) {
         this.moveFocusToTab(this.firstTab);
       }
       else {
-        this.ellipsisDropdown.setAttribute('tabindex', '0');
+        this.ellipsisDropdown.setAttribute("tabindex", "0");
         this.ellipsisDropdown.focus();
       }
     }
     else {
-      const index = this.tabsHeader.findIndex(tab => tab.el === currentTab);
+      const index = this.tabsHeader.findIndex((tab) => tab.el === currentTab);
       this.moveFocusToTab(this.tabsHeader[index + 1].el);
     }
   }
@@ -202,15 +206,15 @@ const PtcTabList = class {
     const currentTab = event.currentTarget;
     let flag = false;
     switch (event.key) {
-      case 'ArrowLeft':
+      case "ArrowLeft":
         this.moveFocusToPreviousTab(currentTab);
         flag = true;
         break;
-      case 'ArrowRight':
+      case "ArrowRight":
         this.moveFocusToNextTab(currentTab);
         flag = true;
         break;
-      case 'Escape':
+      case "Escape":
         this.closeDropdown();
         flag = true;
         break;
@@ -222,7 +226,7 @@ const PtcTabList = class {
   }
   async toggleTabGroup(name) {
     let self = this;
-    this.tabGroup.forEach(group => {
+    this.tabGroup.forEach((group) => {
       if (group.header.name === name) {
         self.selectGroup(group);
       }
@@ -230,7 +234,7 @@ const PtcTabList = class {
   }
   selectGroup(group) {
     let self = this;
-    self.tabGroup.forEach(_ => {
+    self.tabGroup.forEach((_) => {
       _.header.unselect();
       _.content.unselect();
     });
@@ -251,7 +255,11 @@ const PtcTabList = class {
     }
   }
   render() {
-    return (h(Host, { class: this.type }, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { "dropdown-type": this.type, class: this.type == 'tab-with-banner' ? "ellipsis-btn tab-with-banner" : "ellipsis-btn default", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
+    return (h(Host, { class: this.type }, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { "dropdown-type": this.type, class: this.type == "tab-with-banner"
+        ? "ellipsis-btn tab-with-banner"
+        : "ellipsis-btn default", onItemSelected: (e) => {
+        this.onDropdownItemSelected(e.detail);
+      } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/ptc-tab.entry.js

@@ -17,8 +17,8 @@ const Tab = class {
   }
   getCssClassMap() {
     return {
-      ['ptc-pricing-block']: true,
-      ['active']: this.active ? true : false
+      ["ptc-pricing-block"]: true,
+      ["active"]: this.active ? true : false,
     };
   }
 };