@ptcwebops/ptcw-design 6.3.35-beta → 6.3.35

package/dist/collection/components/ptc-product-sidebar/ptc-product-sidebar.css

@@ -107,6 +107,10 @@ ptc-link, ptc-square-card,
   font-size: var(--ptc-font-size-x-small);
   text-decoration: underline;
 }
+:host .filter-result-wrap .result-header .clear-cta:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .filter-result-wrap .result-header .clear-cta.show {
   display: block;
 }
@@ -182,6 +186,10 @@ ptc-link, ptc-square-card,
   display: block;
   font-size: 14px;
 }
+:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:first-child {
   padding-top: 20px;
 }

package/dist/collection/components/ptc-product-sidebar/ptc-product-sidebar.js

@@ -17,6 +17,7 @@ export class PtcProductSidebar {
   componentDidLoad() {
     this.productListWrap = this.hostElement.shadowRoot.querySelector('.product-list-wrap');
     this.clearBtn = this.hostElement.shadowRoot.querySelector('.clear-cta');
+    this.inputBox = this.hostElement.shadowRoot.querySelector('#searchBox');
   }
   // Getting category title and products list
   getDomData() {
@@ -74,6 +75,15 @@ export class PtcProductSidebar {
         'event': e,
       });
     }
+    else if (e.key === 'Escape') {
+      this.clearSearch(e);
+      this.inputBox.focus();
+    }
+  }
+  handleKeyDownClearCta(e) {
+    if (e.key === 'Enter') {
+      this.clearSearch(e);
+    }
   }
   clearSearch(event) {
     let input = this.hostElement.shadowRoot.querySelector('input');
@@ -103,10 +113,10 @@ export class PtcProductSidebar {
   handleClick() {
     this.suggestions = [];
   }
-  handleclearCtaClicked(event) {
-    const { sender, event: mouseEvent, } = event.detail;
+  handleclearCtaClicked(eve) {
+    const { sender, event } = eve.detail;
     if (sender) {
-      this.clearSearch(mouseEvent);
+      this.clearSearch(event);
     }
   }
   handleSelectedValues(event) {
@@ -122,9 +132,31 @@ export class PtcProductSidebar {
       }
     }
   }
+  handleSuggestionKeyDown(e, index, suggestion) {
+    var _a;
+    const listItems = (_a = e.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('li');
+    if (!listItems)
+      return;
+    if (e.key === 'Enter') {
+      this.handleSelectSuggestion(suggestion, e);
+      this.suggestions = [];
+    }
+    else if (e.key === 'Tab') {
+      e.preventDefault();
+      const isShift = e.shiftKey;
+      const nextIndex = isShift
+        ? (index - 1 + listItems.length) % listItems.length
+        : (index + 1) % listItems.length;
+      listItems[nextIndex].focus();
+    }
+    else if (e.key === 'Escape') {
+      this.clearSearch(e);
+      this.inputBox.focus();
+    }
+  }
   render() {
-    return (h(Host, { class: 'search-box' }, h("div", { class: "filter-result-wrap white-box" }, h("div", { class: "result-header" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, this.filterResults), h("span", { class: "clear-cta", onClick: (e) => this.clearSearch(e) }, this.clearText)), h("div", { class: "sort-wrap" }, h("div", { class: "typeahead-input" }, h("label", { htmlFor: "searchBox" }, this.filterText), h("div", { class: "input-wrap" }, h("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.208984 0V1.2375L6.95898 7.65V14.2875L11.5715 17.8875V7.65L18.209 1.35V0H0.208984Z", fill: "#323B42" })), h("input", { type: "text", value: this.searchTerm, onInput: (event) => this.handleInputChange(event), onKeyUp: (e) => this.handleKeyUp(e), id: 'searchBox' })), this.suggestions.length > 0 &&
-      h("div", { class: "suggestion-wrap" }, h("ul", { class: "suggestions" }, this.suggestions.map((suggestion) => (h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e) }, suggestion)))))), h("div", { class: "dropdwon-filter" }, h("label", { htmlFor: "tech-dropdown" }, this.technologyText), h("ptc-product-dropdown", { placeholder: this.selectTechnology, id: "tech-dropdown" }, this.suggestionList.map((item) => (h("span", null, item.categoryName))))))), h("ptc-spacer", { size: "large" }), h("ptc-spacer", { size: "large" }), h("div", { class: "product-list-wrap white-box" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, this.jumpToProduct), this.suggestionList.map((item) => (h("div", { class: "category-list" }, h("ptc-para", { "font-size": 'x-small', "font-weight": 'w-7', "para-line-h": "line-height-densest", "para-margin": 'margin-flush' }, h("list-item", { "list-type": "list-underline", "link-href": '#' + item.categoryName }, h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-2", description: item.categoryName, position: "bottom" }))), h("div", { class: "product-list" }, h("ul", null, item.products.map((product) => (h("list-item", { "list-type": "list-underline", "link-href": '#' + product }, product)))))))))));
+    return (h(Host, { class: 'search-box' }, h("div", { class: "filter-result-wrap white-box" }, h("div", { class: "result-header" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, this.filterResults), h("span", { class: "clear-cta", onClick: (e) => this.clearSearch(e), tabIndex: 0, onKeyDown: (e) => { this.handleKeyDownClearCta(e); } }, this.clearText)), h("div", { class: "sort-wrap" }, h("div", { class: "typeahead-input" }, h("label", { htmlFor: "searchBox" }, this.filterText), h("div", { class: "input-wrap" }, h("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.208984 0V1.2375L6.95898 7.65V14.2875L11.5715 17.8875V7.65L18.209 1.35V0H0.208984Z", fill: "#323B42" })), h("input", { type: "text", value: this.searchTerm, onInput: (event) => this.handleInputChange(event), onKeyUp: (e) => this.handleKeyUp(e), id: 'searchBox' })), this.suggestions.length > 0 &&
+      h("div", { class: "suggestion-wrap" }, h("ul", { class: "suggestions" }, this.suggestions.map((suggestion, index) => (h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e), tabIndex: 0, onKeyDown: (e) => this.handleSuggestionKeyDown(e, index, suggestion) }, suggestion)))))), h("div", { class: "dropdwon-filter" }, h("label", { htmlFor: "tech-dropdown" }, this.technologyText), h("ptc-product-dropdown", { placeholder: this.selectTechnology, id: "tech-dropdown" }, this.suggestionList.map((item) => (h("span", null, item.categoryName))))))), h("ptc-spacer", { size: "large" }), h("ptc-spacer", { size: "large" }), h("div", { class: "product-list-wrap white-box" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, this.jumpToProduct), this.suggestionList.map((item) => (h("div", { class: "category-list" }, h("ptc-para", { "font-size": 'x-small', "font-weight": 'w-7', "para-line-h": "line-height-densest", "para-margin": 'margin-flush' }, h("list-item", { "list-type": "list-underline", "link-href": '#' + item.categoryName }, h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-2", description: item.categoryName, position: "bottom" }))), h("div", { class: "product-list" }, h("ul", null, item.products.map((product) => (h("list-item", { "list-type": "list-underline", "link-href": '#' + product }, product)))))))))));
   }
   static get is() { return "ptc-product-sidebar"; }
   static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class PtcQuote {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.imgSrc ? (h("div", { class: "quote-media" }, this.imgSrc ? h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, h("blockquote", null, this.quoteType == 'value-led-quote' &&
+    return (h(Host, { class: classMap }, this.imgSrc ? (h("div", { class: "quote-media" }, this.imgSrc ? h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, h("blockquote", null, this.quoteType == 'value-led-quote' && this.quoteImage &&
       h("ptc-picture", { alt: "quote", src: this.quoteImage }), h("p", null, h("slot", null)), h("span", { class: "quote-name" }, this.quoteName ? this.quoteName : null), this.ctaText && this.ctaUrl ? (h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": this.ctaUrl }, this.ctaText)) : null))));
   }
   getCssClassMap() {

package/dist/collection/components/ptc-readmore-char/ptc-readmore-char.css

@@ -82,26 +82,26 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);

package/dist/collection/components/ptc-readmore-v3/ptc-readmore-v3.css

@@ -82,26 +82,26 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);

package/dist/collection/components/ptc-related-card-rail/ptc-related-card-rail.js

@@ -3,6 +3,32 @@ import { createFocusTrap } from 'focus-trap';
 export class PtcRelatedCardRail {
   constructor() {
     //lastFocusElement: HTMLElement;
+    this.setFocusTrap = () => {
+      //console.log('this.focusTrap: ' + this.focusTrap)
+      if (!this.focusTrap) {
+        this.focusTrap = createFocusTrap(this.el, {
+          escapeDeactivates: true,
+          returnFocusOnDeactivate: true,
+          onActivate: () => {
+            if (!this.openedByKeyboard) {
+              this.focusTrap.pause(); // If opened by mouse, prevent immediate focus trapping
+            }
+          },
+          onDeactivate: () => {
+            setTimeout(() => {
+              this.closed = true;
+            }, 0);
+          },
+          tabbableOptions: {
+            getShadowRoot: true,
+          },
+        });
+      }
+      if (this.isVisible === true && this.openedByKeyboard === true) {
+        this.focusTrap && this.focusTrap.activate();
+        //console.log('activate focus trap');
+      }
+    };
     this.setScreenBasedProps = () => {
       let windowWidth = window.innerWidth;
       let props = {
@@ -79,33 +105,7 @@ export class PtcRelatedCardRail {
         let percentageSrolled = Math.floor((scrollTop / trackLength) * 100);
         if (percentageSrolled >= 50) {
           this.el.style.display = 'block';
-          if (!this.focusTrap) {
-            this.focusTrap = createFocusTrap(this.el, {
-              escapeDeactivates: true,
-              returnFocusOnDeactivate: true,
-              // setReturnFocus:"#last-focus",
-              onActivate: () => {
-                if (!this.openedByKeyboard) {
-                  this.focusTrap.pause(); // If opened by mouse, prevent immediate focus trapping
-                }
-              },
-              onDeactivate: () => {
-                // this.focusTrap?.deactivate();
-                // this.focusTrap = undefined;
-                console.log('Hello~~~ onDeactivate');
-                setTimeout(() => {
-                  this.closed = true;
-                }, 0);
-                //this.setReturnFocus();
-              },
-              tabbableOptions: {
-                getShadowRoot: true,
-              },
-            });
-            if (this.openedByKeyboard && this.closed === false) {
-              this.focusTrap.activate();
-            }
-          }
+          this.isVisible = true;
         }
         else {
           if (this.focusTrap && this.closed === true) {
@@ -113,6 +113,7 @@ export class PtcRelatedCardRail {
             this.focusTrap = undefined;
           }
           this.el.style.display = 'none';
+          this.isVisible = false;
         }
         let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
         let pageFooter = document.querySelector(this.footerQuerySelector);
@@ -150,7 +151,7 @@ export class PtcRelatedCardRail {
         if (this.focusTrap && this.closed === true) {
           this.focusTrap.deactivate();
           this.focusTrap = undefined;
-          console.log("flag");
+          //console.log('flag');
         }
       }
     };
@@ -159,6 +160,7 @@ export class PtcRelatedCardRail {
     };
     this.footerQuerySelector = undefined;
     this.railTitle = 'Read More Case Studies';
+    this.isVisible = false;
     this.closed = false;
     this.cardInView = 0;
     this.data = [];
@@ -169,15 +171,16 @@ export class PtcRelatedCardRail {
     };
     this.openedByKeyboard = false;
   }
+  onVisibleChanged(newValue) {
+    if (newValue) {
+      this.setFocusTrap();
+      //console.log('isVisible: ' + this.isVisible);
+    }
+  }
   handleKeyClose(event) {
     if (event.key === 'Enter' || event.key === 'Esc') {
       event.preventDefault();
-      if (this.focusTrap) {
-        this.focusTrap.deactivate();
-      }
-      else {
-        this.closed = true;
-      }
+      this.closed = true;
     }
   }
   connectedCallback() {
@@ -206,9 +209,9 @@ export class PtcRelatedCardRail {
       }
     }
     this.handleOnScrollBehaviour();
+    this.setScreenBasedProps();
   }
   componentDidLoad() {
-    this.setScreenBasedProps();
     window.addEventListener('scroll', this.handleOnScrollBehaviour);
     window.addEventListener('resize', this.handleOnResizeBehaviour);
   }
@@ -225,9 +228,7 @@ export class PtcRelatedCardRail {
         if (this.focusTrap) {
           this.focusTrap.deactivate();
         }
-        else {
-          this.closed = true;
-        }
+        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);
       }, onClick: () => {
@@ -282,6 +283,24 @@ export class PtcRelatedCardRail {
         "attribute": "rail-title",
         "reflect": false,
         "defaultValue": "'Read More Case Studies'"
+      },
+      "isVisible": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-visible",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -295,4 +314,10 @@ export class PtcRelatedCardRail {
     };
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "isVisible",
+        "methodName": "onVisibleChanged"
+      }];
+  }
 }

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

@@ -277,10 +277,9 @@ export class PtcSelect {
     if (this.defaultValue)
       this.setValue();
     this.defaultSelect.listen('MDCSelect:change', () => {
-      const select = new MDCSelect(this.el.querySelector('.mdc-select'));
-      if (this.selectedValue !== select.value) {
-        this.valueChange.emit(select.value);
-        this.selectedValue = select.value;
+      if (this.selectedValue !== this.defaultSelect.value) {
+        this.valueChange.emit(this.defaultSelect.value);
+        this.selectedValue = this.defaultSelect.value;
         if (this.fieldId === 'contact-country') {
           const countryCode = this.selectedValue ? this.map[this.selectedValue] : '';
           const telField = document.querySelector('ptc-textfield[field-id="contact-phone"]');
@@ -293,6 +292,11 @@ export class PtcSelect {
     this.addKeyboardAccessibility();
     this.setupFocusHandlers();
   }
+  disconnectedCallback() {
+    if (this.defaultSelect) {
+      this.defaultSelect.destroy();
+    }
+  }
   addKeyboardAccessibility() {
     const selectAnchor = this.el.querySelector('.mdc-select__anchor');
     const menu = this.el.querySelector('.mdc-select__menu');

package/dist/collection/components/ptc-sticky-icons/ptc-sticky-icons.js

@@ -11,6 +11,7 @@ export class PtcStickyIcons {
   }
   setHostLocation() {
     let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
+    const detailSection = document.querySelector(".cs-detail-section");
     let currEle = this.el;
     // get the element
     const element = document.querySelector("ptc-sticky-icons");
@@ -19,6 +20,14 @@ export class PtcStickyIcons {
       if (width < 992) {
         currEle.parentElement.appendChild(currEle);
         currEle.parentElement.style.paddingRight = "0px";
+        // 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;
+          if (lastSection && !lastSection.contains(element)) {
+            lastSection.appendChild(currEle);
+          }
+        }
       }
       else {
         currEle.parentElement.prepend(currEle);

package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.js

@@ -11,6 +11,20 @@ export class PtcTextCopyWithBackground {
     this.disableLightLinks = false;
     this.styles = undefined;
   }
+  componentDidLoad() {
+    var _a;
+    // Run logic only if type is 'hero-footer-cta'
+    if (this.hostEle.getAttribute('type') === 'hero-footer-cta') {
+      const centerWell = document.querySelector('.center-well');
+      if (centerWell) {
+        const sectionCount = centerWell.querySelectorAll(':scope > section').length;
+        // Add class only if more than one <section> inside .center-well
+        if (sectionCount > 1) {
+          (_a = this.hostEle.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add('text-copy-footer-cta');
+        }
+      }
+    }
+  }
   render() {
     const classMap = this.getCssClassMap();
     const slitFill = this.getSlitFillColor();
@@ -216,4 +230,5 @@ export class PtcTextCopyWithBackground {
       }
     };
   }
+  static get elementRef() { return "hostEle"; }
 }

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

@@ -3634,20 +3634,28 @@ ptc-link, ptc-square-card,
 }
 .ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__leading,
 .ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__notch,
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__trailing {
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__trailing,
+.ptc-text-field .mdc-text-field--outlined.mouse-focus .mdc-notched-outline__leading,
+.ptc-text-field .mdc-text-field--outlined.mouse-focus .mdc-notched-outline__notch,
+.ptc-text-field .mdc-text-field--outlined.mouse-focus .mdc-notched-outline__trailing {
   border-color: var(--color-blue-07);
 }
 .ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__leading,
 .ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__notch,
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__trailing {
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__trailing,
+.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__leading,
+.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__notch,
+.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__trailing {
   border-color: var(--keyboard-nav-outline);
   border-width: 5px;
 }
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__leading {
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__leading,
+.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__leading {
   border-top-left-radius: var(--ptc-border-radius-standard) !important;
   border-bottom-left-radius: var(--ptc-border-radius-standard) !important;
 }
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__trailing {
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__trailing,
+.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__trailing {
   border-top-right-radius: var(--ptc-border-radius-standard) !important;
   border-bottom-right-radius: var(--ptc-border-radius-standard) !important;
 }
@@ -3810,4 +3818,61 @@ ptc-link, ptc-square-card,
 }
 .ptc-text-field.email-signup .mdc-text-field__input::placeholder {
   font-size: var(--ptc-font-size-small);
+}
+.ptc-text-field textarea.mdc-text-field__input {
+  min-height: 56px;
+  max-height: 200px;
+  overflow-y: auto;
+  font-size: var(--ptc-font-size-xx-small);
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+  display: block;
+  margin: 0;
+  position: static;
+  padding-right: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  line-height: var(--ptc-font-size-small);
+}
+.ptc-text-field .mdc-text-field--outlined {
+  height: 34px;
+  width: 273px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.ptc-text-field .mdc-text-field--outlined .mdc-notched-outline__trailing {
+  border-radius: 0px !important;
+}
+.ptc-text-field .mdc-text-field--outlined .mdc-notched-outline__leading {
+  border-radius: 0px !important;
+}
+.ptc-text-field .mdc-text-field--outlined:has(textarea.mdc-text-field__input) {
+  min-height: 34px;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+.ptc-text-field .mdc-text-field:has(textarea.mdc-text-field__input) {
+  padding-right: 8px;
+  padding-top: 2px;
+  padding-bottom: 8px;
+}
+.ptc-text-field .mdc-text-field--with-internal-counter textarea.mdc-text-field__input {
+  padding-bottom: 32px;
+  overflow-y: auto;
+  word-break: break-word;
+}
+.ptc-text-field .textarea-wrapper {
+  position: relative;
+  z-index: 9;
+  padding-bottom: 20px;
+}
+.ptc-text-field .textarea-wrapper .mdc-text-field-character-counter {
+  position: absolute;
+  top: unset;
+  bottom: -28px;
+  right: 0;
+  z-index: 9;
 }