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

package/dist/esm/ptc-search-field.entry.js

@@ -11,30 +11,30 @@ const PtcSearchField = class {
     this.placeholderLabel = undefined;
     this.darkTheme = undefined;
     this.isNews = undefined;
-    this.elevation = 'small';
+    this.elevation = "small";
     this.enableClear = false;
     this.styles = undefined;
   }
   textChangedHandler(event) {
     this.valueChanged.emit({
-      'sender': this,
-      'event': event,
-      'searchTerm': this.getSearchValue()
+      sender: this,
+      event: event,
+      searchTerm: this.getSearchValue(),
     });
   }
   buttonClickHandler(event) {
     this.clicked.emit({
-      'sender': this,
-      'event': event,
-      'searchTerm': this.getSearchValue()
+      sender: this,
+      event: event,
+      searchTerm: this.getSearchValue(),
     });
   }
   keyDownHandler(event) {
-    if (event.key == 'Enter') {
+    if (event.key == "Enter") {
       this.clicked.emit({
-        'sender': this,
-        'event': event,
-        'searchTerm': this.getSearchValue()
+        sender: this,
+        event: event,
+        searchTerm: this.getSearchValue(),
       });
     }
     if (this.getSearchValue() && this.enableClear) ;
@@ -45,8 +45,8 @@ const PtcSearchField = class {
     }
   }
   getSearchValue() {
-    let result = '';
-    let input = this.el.shadowRoot.querySelector('input');
+    let result = "";
+    let input = this.el.shadowRoot.querySelector("input");
     if (input) {
       result = input.value;
     }
@@ -54,7 +54,7 @@ const PtcSearchField = class {
   }
   async clearSearchValue() {
     this.textValue = "";
-    let input = this.el.shadowRoot.querySelector('input');
+    let input = this.el.shadowRoot.querySelector("input");
     if (input) {
       input.value = "";
       this.enableClear = false;
@@ -63,14 +63,25 @@ const PtcSearchField = class {
   render() {
     const classMap = this.getCssClassMap();
     const clearIconColor = this.darkTheme ? "white" : "black";
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "search-div" }, h("div", { class: 'input-wrap mf-listen', id: "searchTextID" }, h("input", { id: "ptc-search-input", type: "text", value: this.textValue, placeholder: this.placeholderLabel, onKeyDown: (e) => { this.keyDownHandler(e); }, onKeyUp: () => { this.keyUpHandler(); }, onChange: (e) => { this.textChangedHandler(e); } }), this.enableClear && h("div", { class: "icon-wrapper" }, h("icon-asset", { class: "cls", type: "ptc", color: clearIconColor, name: "times", size: "xxx-small", onClick: (e) => { this.clearSearchValue(); this.buttonClickHandler(e); } }))), h("div", { class: "tracker-div mf-listen", id: "searchBtnID" }, h("button", { type: "button", color: "blackgrey", class: "search-btn", onClick: (e) => { this.buttonClickHandler(e); } }, h("icon-asset", { type: "ptc", size: "medium", name: "new-search", color: "white" }))))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "search-div" }, h("div", { class: "input-wrap mf-listen", id: "searchTextID" }, h("input", { id: "ptc-search-input", type: "text", value: this.textValue, placeholder: this.placeholderLabel, onKeyDown: (e) => {
+        this.keyDownHandler(e);
+      }, onKeyUp: () => {
+        this.keyUpHandler();
+      }, onChange: (e) => {
+        this.textChangedHandler(e);
+      } }), this.enableClear && (h("div", { class: "icon-wrapper" }, h("icon-asset", { class: "cls", type: "ptc", color: clearIconColor, name: "times", size: "xxx-small", onClick: (e) => {
+        this.clearSearchValue();
+        this.buttonClickHandler(e);
+      } })))), h("div", { class: "tracker-div mf-listen", id: "searchBtnID" }, h("button", { type: "button", color: "blackgrey", class: "search-btn", onClick: (e) => {
+        this.buttonClickHandler(e);
+      } }, h("icon-asset", { type: "ptc", size: "medium", name: "new-search", color: "white" }))))));
   }
   getCssClassMap() {
     return {
-      ['dark']: this.darkTheme ? true : false,
+      ["dark"]: this.darkTheme ? true : false,
       [this.elevation]: true,
-      ['enable-clear']: this.enableClear,
-      ['news']: this.isNews ? true : false,
+      ["enable-clear"]: this.enableClear,
+      ["news"]: this.isNews ? true : false,
     };
   }
   get el() { return getElement(this); }

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

@@ -6,18 +6,18 @@ const PtcSeoTitle = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.isPlmHub = false;
-    this.type = 'h2';
+    this.type = "h2";
     this.textAlign = undefined;
-    this.upperline = 'dotted';
+    this.upperline = "dotted";
     this.titleShadow = undefined;
-    this.titleColor = 'gray';
+    this.titleColor = "gray";
     this.titleMargin = undefined;
     this.titleWeight = undefined;
     this.titleSize = undefined;
-    this.titleHeight = 'densest';
+    this.titleHeight = "densest";
     this.styles = undefined;
     this.ellipsisLineCutoff = undefined;
-    this.titleDisplay = 'inline-block';
+    this.titleDisplay = "inline-block";
   }
   render() {
     const classMap = this.getCssClassMap();
@@ -51,14 +51,14 @@ const PtcSeoTitle = class {
     return {
       [this.textAlign]: !!this.textAlign ? true : false,
       [this.upperline]: true,
-      [this.isPlmHub ? 'is-plm-hub' : 'is-standard']: true,
+      [this.isPlmHub ? "is-plm-hub" : "is-standard"]: true,
       [this.titleMargin]: !!this.titleMargin ? true : false,
       [this.titleShadow]: !!this.titleShadow ? true : false,
       [this.titleWeight]: !!this.titleWeight ? true : false,
       [this.titleSize]: !!this.titleSize ? true : false,
       [this.titleHeight]: !!this.titleHeight ? true : false,
       [this.titleColor]: !!this.titleColor ? true : false,
-      ['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
+      ["ellipsis-boxing"]: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
       [this.titleDisplay]: !!this.titleDisplay ? true : false,
     };
   }
@@ -66,7 +66,7 @@ const PtcSeoTitle = class {
     let result;
     if (this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0) {
       result = {
-        ['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`,
+        ["-webkit-line-clamp"]: `${this.ellipsisLineCutoff}`,
       };
     }
     return result;

package/dist/esm/ptc-shopping-cart.entry.js

@@ -16,45 +16,47 @@ const PtcShoppingCart = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.cartCount = undefined;
-    this.color = 'white';
-    this.cartText = 'Cart';
+    this.color = "white";
+    this.cartText = "Cart";
   }
   render() {
     const classMap = this.getCssClassMap();
-    const svg = this.color == 'black' ? ShoppingCartBlack : ShoppingCartWhite;
-    const svgClass = this.color == 'black' ? "cart clear-background" : "cart black-background";
-    return (h(Host, { class: classMap }, this.cartCount ? (h("div", { class: svgClass, innerHTML: svg, tabindex: "0" }, h("span", { class: 'cart-text' }, this.cartText), h("div", { class: "cart__count" }, this.cartCount))) : (h("div", { class: svgClass, innerHTML: svg }, h("span", { class: 'cart-text' }, this.cartText)))));
+    const svg = this.color == "black" ? ShoppingCartBlack : ShoppingCartWhite;
+    const svgClass = this.color == "black"
+      ? "cart clear-background"
+      : "cart black-background";
+    return (h(Host, { class: classMap }, this.cartCount ? (h("div", { class: svgClass, innerHTML: svg, tabindex: "0" }, h("span", { class: "cart-text" }, this.cartText), h("div", { class: "cart__count" }, this.cartCount))) : (h("div", { class: svgClass, innerHTML: svg }, h("span", { class: "cart-text" }, this.cartText)))));
     /*
-            if(this.color == 'black'){
-                return (
-                    <Host class={classMap}>
-                        {this.cartCount ? (
-                            <div class="cart" innerHTML={ShoppingCartBlack}>
-                                <div class="cart__count">{this.cartCount}</div>
-                            </div>
-                        ) : (
-                            <div innerHTML={ShoppingCartBlack}></div>)
-                        }
-                    </Host>
-                );
-            } else if(this.color == 'white'){
-                return(
-                    <Host class={classMap}>
-                        {this.cartCount ? (
-                            <div class="cart black-background" innerHTML={ShoppingCartWhite}>
-                                <div class="cart__count">{this.cartCount}</div>
-                            </div>
-                        ) : (
-                            <div innerHTML={ShoppingCartWhite} class="black-background"></div>)
-                        }
-                    </Host>
-                );
-            }*/
+                if(this.color == 'black'){
+                    return (
+                        <Host class={classMap}>
+                            {this.cartCount ? (
+                                <div class="cart" innerHTML={ShoppingCartBlack}>
+                                    <div class="cart__count">{this.cartCount}</div>
+                                </div>
+                            ) : (
+                                <div innerHTML={ShoppingCartBlack}></div>)
+                            }
+                        </Host>
+                    );
+                } else if(this.color == 'white'){
+                    return(
+                        <Host class={classMap}>
+                            {this.cartCount ? (
+                                <div class="cart black-background" innerHTML={ShoppingCartWhite}>
+                                    <div class="cart__count">{this.cartCount}</div>
+                                </div>
+                            ) : (
+                                <div innerHTML={ShoppingCartWhite} class="black-background"></div>)
+                            }
+                        </Host>
+                    );
+                }*/
   }
   getCssClassMap() {
     return {
-      ['ptc-shopping-cart']: true,
-      ['mf-listen']: true,
+      ["ptc-shopping-cart"]: true,
+      ["mf-listen"]: true,
     };
   }
 };

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

@@ -7,14 +7,19 @@ const PtcSkeleton = class {
     registerInstance(this, hostRef);
     this.isLoading = true;
     this.animated = false;
-    this.width = '100%';
+    this.width = "100%";
     this.borderRadius = undefined;
     this.topMargin = "0px";
     this.btmMargin = "0px";
   }
   render() {
-    const borderRadiusValue = this.borderRadius || getComputedStyle(document.documentElement).getPropertyValue('--ptc-border-radius-large');
-    return (h("div", { class: `content ${this.animated && this.isLoading ? 'animated' : ''}`, style: { width: this.width, marginTop: this.topMargin, marginBottom: this.btmMargin } }, this.isLoading ? h("div", { class: "placeholder", style: { borderRadius: borderRadiusValue } }) : h("slot", null)));
+    const borderRadiusValue = this.borderRadius ||
+      getComputedStyle(document.documentElement).getPropertyValue("--ptc-border-radius-large");
+    return (h("div", { class: `content ${this.animated && this.isLoading ? "animated" : ""}`, style: {
+        width: this.width,
+        marginTop: this.topMargin,
+        marginBottom: this.btmMargin,
+      } }, this.isLoading ? (h("div", { class: "placeholder", style: { borderRadius: borderRadiusValue } })) : (h("slot", null))));
   }
   get el() { return getElement(this); }
 };

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

@@ -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-spacer.entry.js

@@ -5,27 +5,27 @@ const ptcSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:
 const PtcSpacer = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.breakpoint = '';
-    this.size = 'medium';
-    this.direction = 'vertical';
+    this.breakpoint = "";
+    this.size = "medium";
+    this.direction = "vertical";
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }));
+    return h(Host, { class: classMap });
   }
   getCssClassMap() {
     return {
       [this.size]: true,
-      ['ptc-spacer-horizontal']: this.direction === 'horizontal',
-      ['ptc-spacer-vertical']: this.direction === 'vertical',
-      ['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
-      ['ptc-spacer-x-small']: this.breakpoint === 'x-small',
-      ['ptc-spacer-small']: this.breakpoint === 'small',
-      ['ptc-spacer-medium']: this.breakpoint === 'medium',
-      ['ptc-spacer-large']: this.breakpoint === 'large',
-      ['ptc-spacer-x-large']: this.breakpoint === 'x-large',
-      ['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
-      ['ptc-spacer-xxx-large']: this.breakpoint === 'xxx-large',
+      ["ptc-spacer-horizontal"]: this.direction === "horizontal",
+      ["ptc-spacer-vertical"]: this.direction === "vertical",
+      ["ptc-spacer-xx-small"]: this.breakpoint === "xx-small",
+      ["ptc-spacer-x-small"]: this.breakpoint === "x-small",
+      ["ptc-spacer-small"]: this.breakpoint === "small",
+      ["ptc-spacer-medium"]: this.breakpoint === "medium",
+      ["ptc-spacer-large"]: this.breakpoint === "large",
+      ["ptc-spacer-x-large"]: this.breakpoint === "x-large",
+      ["ptc-spacer-xx-large"]: this.breakpoint === "xx-large",
+      ["ptc-spacer-xxx-large"]: this.breakpoint === "xxx-large",
     };
   }
 };

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 {