@ptcwebops/ptcw-design 6.3.37 → 6.3.38

package/dist/esm/ptc-related-card-rail.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-c83db688.js';
 import { c as createFocusTrap } from './focus-trap.esm-d205300d.js';
 
-const ptcRelatedCardRailCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;}:host .card-rail-container{position:fixed;bottom:132px;left:24px;width:calc(100vw - 48px);background:white;border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-small);box-sizing:border-box;z-index:50}:host .card-rail-header{display:flex;justify-content:space-between;border-bottom:var(--color-gray-02) solid 1px}:host .card-rail-heading{margin:12px 0 12px 16px}:host .card-rail-close{padding:15px;cursor:pointer}:host .card-rail-close:focus-visible{outline:5px solid var(--keyboard-nav-outline) !important;border-radius:var(--ptc-border-radius-standard) !important}:host .card-rail-content{display:flex;align-items:center}:host .card-rail-content icon-asset{position:absolute;z-index:55px;padding:13px;}:host .card-rail-content icon-asset#left-arrow{left:3px;cursor:pointer}:host .card-rail-content icon-asset#right-arrow{right:3px;cursor:pointer}:host .card-rail-content .content-container{margin:24px 50px 24px 50px;display:flex;overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none;}:host .card-rail-content .content-container::-webkit-scrollbar{display:none}:host .card-rail-content .content-container .content{flex:1 0 calc(100% - 10px);display:flex;padding:5px}:host .card-rail-content .content-container .content:hover{cursor:pointer}:host .card-rail-content .content-container .content:focus-visible{outline:5px solid var(--keyboard-nav-outline) !important;border-radius:var(--ptc-border-radius-standard) !important;outline-offset:-5px}:host .card-rail-content .content-container .content .content-image{width:130px;height:73px;text-align:center}:host .card-rail-content .content-container .content .content-image img{width:100%;height:100%;object-fit:cover}:host .card-rail-content .content-container .content .content-text{flex:1;padding-left:12px}@media only screen and (min-width: 768px){:host .card-rail-container .card-rail-content icon-asset#left-arrow{left:11px}:host .card-rail-container .card-rail-content icon-asset#right-arrow{right:11px}:host .card-rail-container .card-rail-content .content-container{margin:24px 66px 24px 66px;}:host .card-rail-container .card-rail-content .content-container .content{flex:1 0 50%}:host .card-rail-container .card-rail-content .content-container .content .content-text{padding-right:16px}}@media only screen and (min-width: 992px){:host .card-rail-container .card-rail-content icon-asset#left-arrow{left:19px;}:host .card-rail-container .card-rail-content icon-asset#right-arrow{right:19px}:host .card-rail-container .card-rail-content .content-container{margin:24px 82px 24px 82px;}}@media only screen and (min-width: 1200px){:host .card-rail-container{left:134px;width:calc(100vw - 268px)}}@media only screen and (min-width: 1440px){:host .card-rail-container{left:32px;width:932px}}@media only screen and (min-width: 1600px){:host .card-rail-container{left:32px;width:1328px}:host .card-rail-container .card-rail-content .content-container .content{flex:1 0 33.33%}}";
+const ptcRelatedCardRailCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;}:host .card-rail-container{position:fixed;bottom:132px;left:24px;width:calc(100vw - 48px);background:white;border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-small);box-sizing:border-box;z-index:50}:host .card-rail-header{display:flex;justify-content:space-between;border-bottom:var(--color-gray-02) solid 1px}:host .card-rail-heading{margin:12px 0 12px 16px}:host .card-rail-close{padding:15px;cursor:pointer}:host .card-rail-close:focus-visible{outline:5px solid var(--keyboard-nav-outline) !important;border-radius:var(--ptc-border-radius-standard) !important}:host .card-rail-content{display:flex;align-items:center}:host .card-rail-content icon-asset{position:absolute;z-index:55px;padding:13px;}:host .card-rail-content icon-asset#left-arrow{left:3px;cursor:pointer}:host .card-rail-content icon-asset#right-arrow{right:3px;cursor:pointer}:host .card-rail-content .content-container{margin:24px 50px 24px 50px;display:flex;overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none;}:host .card-rail-content .content-container::-webkit-scrollbar{display:none}:host .card-rail-content .content-container .content{flex:1 0 calc(100% - 10px);display:flex;padding:5px}:host .card-rail-content .content-container .content:hover{cursor:pointer}:host .card-rail-content .content-container .content:focus-visible{outline:5px solid var(--keyboard-nav-outline) !important;border-radius:var(--ptc-border-radius-standard) !important;outline-offset:-5px}:host .card-rail-content .content-container .content .content-image{width:130px;height:73px;text-align:center}:host .card-rail-content .content-container .content .content-image img{width:100%;height:100%;object-fit:cover}:host .card-rail-content .content-container .content .content-text{flex:1;padding-left:12px}@media only screen and (min-width: 768px){:host .card-rail-container .card-rail-content icon-asset#left-arrow{left:11px;}:host .card-rail-container .card-rail-content icon-asset#right-arrow{right:11px}:host .card-rail-container .card-rail-content .content-container{margin:24px 66px 24px 66px;}:host .card-rail-container .card-rail-content .content-container .content{flex:1 0 50%}:host .card-rail-container .card-rail-content .content-container .content .content-text{padding-right:16px}}@media only screen and (min-width: 992px){:host .card-rail-container .card-rail-content icon-asset#left-arrow{left:19px;}:host .card-rail-container .card-rail-content icon-asset#right-arrow{right:19px}:host .card-rail-container .card-rail-content .content-container{margin:24px 82px 24px 82px;}}@media only screen and (min-width: 1200px){:host .card-rail-container{left:134px;width:calc(100vw - 268px)}}@media only screen and (min-width: 1440px){:host .card-rail-container{left:32px;width:932px}}@media only screen and (min-width: 1600px){:host .card-rail-container{left:32px;width:1328px}:host .card-rail-container .card-rail-content .content-container .content{flex:1 0 33.33%}}";
 
 const PtcRelatedCardRail = class {
   constructor(hostRef) {
@@ -42,73 +42,76 @@ const PtcRelatedCardRail = class {
       };
       if (windowWidth >= 2600) {
         props.contentCards = 3;
-        props.parahFontSize = 'xx-small';
+        props.parahFontSize = "xx-small";
       }
       else if (windowWidth >= 1980) {
         props.contentCards = 3;
-        props.parahFontSize = 'xx-small';
+        props.parahFontSize = "xx-small";
       }
       else if (windowWidth >= 1440) {
         props.contentCards = 2;
-        props.parahFontSize = 'xx-small';
+        props.parahFontSize = "xx-small";
       }
       else if (windowWidth >= 1200) {
         props.contentCards = 2;
-        props.parahFontSize = 'xx-small';
+        props.parahFontSize = "xx-small";
       }
       else if (windowWidth >= 992) {
         props.contentCards = 2;
-        props.parahFontSize = 'xx-small';
+        props.parahFontSize = "xx-small";
       }
       else if (windowWidth >= 768) {
         props.contentCards = 2;
-        props.parahFontSize = 'xxx-small';
+        props.parahFontSize = "xxx-small";
       }
       else {
         props.contentCards = 1;
-        props.parahFontSize = 'xxx-small';
+        props.parahFontSize = "xxx-small";
       }
       this.screenBasedProps = Object.assign({}, props);
     };
     this.handlePrevClick = () => {
       var _a, _b;
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector(".content-container");
       let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
       let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
-      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll(".content");
       if (this.cardInView > 0) {
         this.cardInView -= 1;
         const content = contentCards[this.cardInView];
         contentContainer.scrollTo({
           left: content.offsetLeft - contentContainerMarginLeft,
-          behavior: 'smooth',
+          behavior: "smooth",
         });
       }
     };
     this.handleNextClick = () => {
       var _a, _b;
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector(".content-container");
       let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
       let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
-      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
-      if (this.cardInView < contentCards.length - this.screenBasedProps.contentCards) {
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll(".content");
+      if (this.cardInView <
+        contentCards.length - this.screenBasedProps.contentCards) {
         this.cardInView += 1;
         const content = contentCards[this.cardInView];
         contentContainer.scrollTo({
           left: content.offsetLeft - contentContainerMarginLeft,
-          behavior: 'smooth',
+          behavior: "smooth",
         });
       }
     };
     this.handleOnScrollBehaviour = () => {
       if (!this.closed) {
-        let windowHeight = window.innerHeight || (document.documentElement || document.body).clientHeight;
+        let windowHeight = window.innerHeight ||
+          (document.documentElement || document.body).clientHeight;
         let documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
-        let scrollTop = window.scrollY || (document.documentElement || document.body).scrollTop;
+        let scrollTop = window.scrollY ||
+          (document.documentElement || document.body).scrollTop;
         let trackLength = documentHeight - windowHeight;
         let percentageSrolled = Math.floor((scrollTop / trackLength) * 100);
         if (percentageSrolled >= 50) {
-          this.el.style.display = 'block';
+          this.el.style.display = "block";
           this.isVisible = true;
         }
         else {
@@ -116,10 +119,10 @@ const PtcRelatedCardRail = class {
             this.focusTrap.deactivate();
             this.focusTrap = undefined;
           }
-          this.el.style.display = 'none';
+          this.el.style.display = "none";
           this.isVisible = false;
         }
-        let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
+        let cardRailContainer = this.el.shadowRoot.querySelector(".card-rail-container");
         let pageFooter = document.querySelector(this.footerQuerySelector);
         if (pageFooter) {
           let pageFooterTop = pageFooter.getBoundingClientRect().top;
@@ -140,17 +143,17 @@ const PtcRelatedCardRail = class {
     this.handleOnResizeBehaviour = () => {
       var _a, _b;
       this.setScreenBasedProps();
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector(".content-container");
       let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
       let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
-      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll(".content");
       contentContainer.scrollTo({
         left: contentCards[0].offsetLeft - contentContainerMarginLeft,
       });
       this.cardInView = 0;
     };
     this.handleKeyPress = (event) => {
-      if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
+      if (event.key === "Enter" || event.key === " " || event.key === "Tab") {
         this.openedByKeyboard = true;
         if (this.focusTrap && this.closed === true) {
           this.focusTrap.deactivate();
@@ -163,7 +166,7 @@ const PtcRelatedCardRail = class {
       this.openedByKeyboard = false;
     };
     this.footerQuerySelector = undefined;
-    this.railTitle = 'Read More Case Studies';
+    this.railTitle = "Read More Case Studies";
     this.isVisible = false;
     this.closed = false;
     this.cardInView = 0;
@@ -182,32 +185,32 @@ const PtcRelatedCardRail = class {
     }
   }
   handleKeyClose(event) {
-    if (event.key === 'Enter' || event.key === 'Esc') {
+    if (event.key === "Enter" || event.key === "Esc") {
       event.preventDefault();
       this.closed = true;
     }
   }
   connectedCallback() {
-    document.addEventListener('keydown', this.handleKeyPress, true);
-    document.addEventListener('mousedown', this.handleMouseDown, true);
+    document.addEventListener("keydown", this.handleKeyPress, true);
+    document.addEventListener("mousedown", this.handleMouseDown, true);
   }
   componentWillLoad() {
     const relatedCards = this.el.querySelectorAll('[slot^="related-card-"]');
     for (let ind in relatedCards) {
       let card = relatedCards[ind];
-      if (card.tagName === 'DIV') {
+      if (card.tagName === "DIV") {
         let cardData = {
           image: undefined,
           text: undefined,
           href: undefined,
           altText: undefined,
         };
-        let cardImage = card.querySelector('img');
-        let cardLink = card.querySelector('a');
-        cardData.image = cardImage.getAttribute('src');
-        cardData.altText = cardImage.getAttribute('alt');
+        let cardImage = card.querySelector("img");
+        let cardLink = card.querySelector("a");
+        cardData.image = cardImage.getAttribute("src");
+        cardData.altText = cardImage.getAttribute("alt");
         cardData.text = cardLink.innerText;
-        cardData.href = cardLink.getAttribute('href');
+        cardData.href = cardLink.getAttribute("href");
         this.data.push(cardData);
         card.remove();
       }
@@ -216,28 +219,30 @@ const PtcRelatedCardRail = class {
     this.setScreenBasedProps();
   }
   componentDidLoad() {
-    window.addEventListener('scroll', this.handleOnScrollBehaviour);
-    window.addEventListener('resize', this.handleOnResizeBehaviour);
+    window.addEventListener("scroll", this.handleOnScrollBehaviour);
+    window.addEventListener("resize", this.handleOnResizeBehaviour);
   }
   disconnectedCallback() {
-    document.removeEventListener('keydown', this.handleKeyPress, true);
-    document.removeEventListener('mousedown', this.handleMouseDown, true);
+    document.removeEventListener("keydown", this.handleKeyPress, true);
+    document.removeEventListener("mousedown", this.handleMouseDown, true);
     if (this.focusTrap) {
       this.focusTrap.deactivate();
       this.focusTrap = undefined;
     }
   }
   render() {
-    return this.closed ? null : (h(Host, null, h("div", { class: "card-rail-container", id: "card-rail-reveal-tag" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.railTitle)), h("div", { ref: el => (this.targetElement = el), id: "card-rail-close", class: "card-rail-close mf-listen", onKeyDown: event => this.handleKeyClose(event), onClick: () => {
+    return this.closed ? null : (h(Host, null, h("div", { class: "card-rail-container", id: "card-rail-reveal-tag" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.railTitle)), h("div", { ref: (el) => (this.targetElement = el), id: "card-rail-close", class: "card-rail-close mf-listen", onKeyDown: (event) => this.handleKeyClose(event), onClick: () => {
         if (this.focusTrap) {
           this.focusTrap.deactivate();
         }
         this.closed = true;
       }, tabindex: "0" }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", class: "mf-listen", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", class: "mf-listen", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map((item, index) => (h("div", { class: "content mf-listen", id: `card-rail-content-${index}`, onKeyDown: (event) => {
-        event.key === 'Enter' && window.open(item.href);
+        event.key === "Enter" &&
+          window.open(item.href);
       }, onClick: () => {
         window.open(item.href);
-      }, tabindex: "0" }, h("div", { class: "content-image" }, h("img", { alt: item.altText, src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text))))))))));
+      }, tabindex: "0" }, h("div", { class: "content-image" }, h("img", { alt: item.altText, src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps
+        .parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text))))))))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/ptc-responsive-wrapper.entry.js

@@ -7,7 +7,7 @@ const PtcResponsiveWrapper = class {
     registerInstance(this, hostRef);
   }
   componentDidLoad() {
-    this.ro = new ResizeObserver(entries => {
+    this.ro = new ResizeObserver((entries) => {
       for (const entry of entries) {
         this.applySizeClasses(entry.contentRect.width);
       }

package/dist/esm/ptc-scroll-button.entry.js

@@ -40,24 +40,25 @@ const PtcScrollButton = class {
     this.handleClick = () => {
       if (!this.scrollContainer)
         return;
-      const scrollValue = this.scrollAmount * (this.direction === 'left' || this.direction === 'up' ? -1 : 1);
-      if (this.orientation === 'horizontal') {
+      const scrollValue = this.scrollAmount *
+        (this.direction === "left" || this.direction === "up" ? -1 : 1);
+      if (this.orientation === "horizontal") {
         this.scrollContainer.scrollBy({
           left: scrollValue,
-          behavior: 'smooth',
+          behavior: "smooth",
         });
       }
-      else if (this.orientation === 'vertical') {
+      else if (this.orientation === "vertical") {
         this.scrollContainer.scrollBy({
           top: scrollValue,
-          behavior: 'smooth',
+          behavior: "smooth",
         });
       }
     };
     this.direction = undefined;
     this.scrollContainerClass = undefined;
     this.scrollAmount = 100;
-    this.orientation = 'horizontal';
+    this.orientation = "horizontal";
     this.trackerId = undefined;
     this.styles = undefined;
     this.isVisible = true;
@@ -67,12 +68,12 @@ const PtcScrollButton = class {
   componentWillLoad() {
     this.scrollContainer = document.querySelector(`.${this.scrollContainerClass}`);
     if (this.scrollContainer) {
-      this.scrollContainer.classList.add('hide-scrollbar');
+      this.scrollContainer.classList.add("hide-scrollbar");
       this.updateVisibility(); // Initial visibility check
-      this.scrollContainer.addEventListener('scroll', this.handleScroll);
+      this.scrollContainer.addEventListener("scroll", this.handleScroll);
     }
     else {
-      console.error('scrollContainer ele not found');
+      console.error("scrollContainer ele not found");
     }
   }
   componentDidLoad() {
@@ -83,7 +84,7 @@ const PtcScrollButton = class {
   }
   disconnectedCallback() {
     if (this.scrollContainer) {
-      this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+      this.scrollContainer.removeEventListener("scroll", this.handleScroll);
       this.disableDragging();
     }
   }
@@ -91,38 +92,38 @@ const PtcScrollButton = class {
     this.updateVisibility();
   }
   enableDragging() {
-    this.scrollContainer.addEventListener('mousedown', this.startDragging);
-    this.scrollContainer.addEventListener('mousemove', this.performDragging);
-    ['mouseup', 'mouseleave'].forEach(event => this.scrollContainer.addEventListener(event, this.stopDragging));
+    this.scrollContainer.addEventListener("mousedown", this.startDragging);
+    this.scrollContainer.addEventListener("mousemove", this.performDragging);
+    ["mouseup", "mouseleave"].forEach((event) => this.scrollContainer.addEventListener(event, this.stopDragging));
   }
   disableDragging() {
-    this.scrollContainer.removeEventListener('mousedown', this.startDragging);
-    this.scrollContainer.removeEventListener('mousemove', this.performDragging);
-    ['mouseup', 'mouseleave'].forEach(event => this.scrollContainer.removeEventListener(event, this.stopDragging));
+    this.scrollContainer.removeEventListener("mousedown", this.startDragging);
+    this.scrollContainer.removeEventListener("mousemove", this.performDragging);
+    ["mouseup", "mouseleave"].forEach((event) => this.scrollContainer.removeEventListener(event, this.stopDragging));
   }
   updateVisibility() {
     if (!this.scrollContainer)
       return;
-    const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, clientHeight } = this.scrollContainer;
-    if (this.orientation === 'horizontal') {
-      if (this.direction === 'left') {
+    const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, clientHeight, } = this.scrollContainer;
+    if (this.orientation === "horizontal") {
+      if (this.direction === "left") {
         this.isVisible = scrollLeft > 0;
       }
-      else if (this.direction === 'right') {
+      else if (this.direction === "right") {
         this.isVisible = scrollLeft + clientWidth + 1 < scrollWidth; // "+1" adjustments after adding margin-right 40px
       }
     }
-    else if (this.orientation === 'vertical') {
-      if (this.direction === 'up') {
+    else if (this.orientation === "vertical") {
+      if (this.direction === "up") {
         this.isVisible = scrollTop > 0;
       }
-      else if (this.direction === 'down') {
+      else if (this.direction === "down") {
         this.isVisible = scrollTop + clientHeight < scrollHeight;
       }
     }
   }
   render() {
-    return (h(Host, { "is-dragging": this.isDragging }, this.styles && h("style", null, this.styles), this.isVisible && (h("button", { id: this.trackerId, onClick: this.handleClick, class: `scroll-btn ${this.direction}`, "aria-label": this.direction, tabindex: "0" }, this.direction === 'left' && h("icon-asset", { name: "left-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'right' && h("icon-asset", { name: "right-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'up' && '▲', this.direction === 'down' && '▼'))));
+    return (h(Host, { "is-dragging": this.isDragging }, this.styles && h("style", null, this.styles), this.isVisible && (h("button", { id: this.trackerId, onClick: this.handleClick, class: `scroll-btn ${this.direction}`, "aria-label": this.direction, tabindex: "0" }, this.direction === "left" && (h("icon-asset", { name: "left-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" })), this.direction === "right" && (h("icon-asset", { name: "right-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" })), this.direction === "up" && "▲", this.direction === "down" && "▼"))));
   }
 };
 PtcScrollButton.style = ptcScrollButtonCss;

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