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

package/dist/collection/components/ptc-featured-list/ptc-featured-list.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -77,39 +81,155 @@ a.disabled {
   cursor: not-allowed;
 }
 a:focus-visible {
-  outline: 5px solid #003DD6 !important;
+  outline: 5px solid #003dd6 !important;
   outline-offset: 0px !important;
   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,
+.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 {
   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,
+.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 {
   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,
+.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 {
   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,
+.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 {
   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,
+.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 {
   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,
+.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 {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
 }
-.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
+.light-links .podcast-cta-section a,
+.background-grey-10 .podcast-cta-section a,
+.background-plm-grey .podcast-cta-section a {
   border: 2px solid transparent;
 }
-.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
+.light-links .podcast-cta-section a:focus-visible,
+.background-grey-10 .podcast-cta-section a:focus-visible,
+.background-plm-grey .podcast-cta-section a: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-featured-list/ptc-featured-list.js

@@ -1,8 +1,8 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcFeaturedList {
   constructor() {
     this.isMobile = undefined;
-    this.selectedTab = 'tab-01';
+    this.selectedTab = "tab-01";
   }
   handleResize() {
     this.isMobile = window.innerWidth < 992;
@@ -16,10 +16,10 @@ export class PtcFeaturedList {
   }
   updateReadMoreInTabContents() {
     const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
-    contentBlocks.forEach(content => {
+    contentBlocks.forEach((content) => {
       //  Added code to recall readmore for hidden tabs
-      if (content.getAttribute('name-key') === this.selectedTab) {
-        const readMoreComp = content.querySelector('ptc-readmore');
+      if (content.getAttribute("name-key") === this.selectedTab) {
+        const readMoreComp = content.querySelector("ptc-readmore");
         if (readMoreComp) {
           readMoreComp.updateReadmoreStatus();
         }
@@ -27,13 +27,11 @@ export class PtcFeaturedList {
     });
   }
   render() {
-    return (h(Host, null, h("div", { class: "featured-image-wrap" }, h("fl-tab-image", { "name-key": "tab-01", selected: this.selectedTab === 'tab-01' }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" })), h("fl-tab-image", { "name-key": "tab-02", selected: this.selectedTab === 'tab-02' }, h("ptc-background-video", { overlay: false, "play-button-title": "Play", "pause-button-title": "Pause", "video-src": "https://www.ptc.com/en/www.ptc.com//-/media/Videos/BRAND-FILM-CAR-SECTION-short-1mb.mp4", "poster-src": "https://www.ptc.com/-/media/Images/new-org/misc/W232501-LWX23-Hero-Banner-Video-FINAL-jebyrne-110922-screenshot.jpg" })), h("fl-tab-image", { "name-key": "tab-03", selected: this.selectedTab === 'tab-03' }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "https://www.ptc.com/-/media/Images/new-org/1366x542/CIMC-1366x542.jpg?h=542&w=1366&la=en&hash=56AE14F73CFB62C24276D08E556B0949" })), h("fl-tab-image", { "name-key": "tab-04", selected: this.selectedTab === 'tab-04' }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "https://www.ptc.com/-/media/Images/new-org/1366x542/ThingWorx_IIOT_CaterpillarCS_Img_1366x542.jpg?h=542&w=1366&la=en&hash=627ED00C1F58E3677A06F50C0F3009D6" }))), this.isMobile ? (
+    return (h(Host, null, h("div", { class: "featured-image-wrap" }, h("fl-tab-image", { "name-key": "tab-01", selected: this.selectedTab === "tab-01" }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" })), h("fl-tab-image", { "name-key": "tab-02", selected: this.selectedTab === "tab-02" }, h("ptc-background-video", { overlay: false, "play-button-title": "Play", "pause-button-title": "Pause", "video-src": "https://www.ptc.com/en/www.ptc.com//-/media/Videos/BRAND-FILM-CAR-SECTION-short-1mb.mp4", "poster-src": "https://www.ptc.com/-/media/Images/new-org/misc/W232501-LWX23-Hero-Banner-Video-FINAL-jebyrne-110922-screenshot.jpg" })), h("fl-tab-image", { "name-key": "tab-03", selected: this.selectedTab === "tab-03" }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "https://www.ptc.com/-/media/Images/new-org/1366x542/CIMC-1366x542.jpg?h=542&w=1366&la=en&hash=56AE14F73CFB62C24276D08E556B0949" })), h("fl-tab-image", { "name-key": "tab-04", selected: this.selectedTab === "tab-04" }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "https://www.ptc.com/-/media/Images/new-org/1366x542/ThingWorx_IIOT_CaterpillarCS_Img_1366x542.jpg?h=542&w=1366&la=en&hash=627ED00C1F58E3677A06F50C0F3009D6" }))), this.isMobile ? (
     // Code for mobile only
-    h("div", { class: "mobile-wrapper" }, h("div", { class: 'acc-item' }, h("fl-tab-header", { "value-key": 1, "name-key": "tab-01", "tab-title": "Aerospace & Defense", selected: this.selectedTab === 'tab-01' }, " "), h("fl-tab-content", { "value-key": 1, "name-key": "tab-01", selected: this.selectedTab === 'tab-01', onbeforematch: () => this.selectedTab = 'tab-01' }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "value-key": 2, "name-key": "tab-02", "tab-title": "Automotive", selected: this.selectedTab === 'tab-02' }), h("fl-tab-content", { "value-key": 2, "name-key": "tab-02", selected: this.selectedTab === 'tab-02', onbeforematch: () => this.selectedTab = 'tab-02' }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "value-key": 3, "name-key": "tab-03", "tab-title": "Electronics & High-Tech", selected: this.selectedTab === 'tab-03' }), h("fl-tab-content", { "value-key": 3, "name-key": "tab-03", selected: this.selectedTab === 'tab-03', onbeforematch: () => this.selectedTab = 'tab-03' }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "value-key": 4, "name-key": "tab-04", "tab-title": "Retail & Consumer Products", selected: this.selectedTab === 'tab-04' }), h("fl-tab-content", { "value-key": 4, "name-key": "tab-04", selected: this.selectedTab === 'tab-04', onbeforematch: () => this.selectedTab = 'tab-04' }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")))))
-      :
-        (
-        // Code for Desktop only
-        h("div", { class: "non-mobile-wrapper" }, h("div", { class: "header-list-wrap" }, h("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", selected: this.selectedTab === 'tab-01' }, " "), h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive", selected: this.selectedTab === 'tab-02' }), h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech", selected: this.selectedTab === 'tab-03' }), h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products", selected: this.selectedTab === 'tab-04' })), h("div", { class: "content-wrap" }, h("fl-tab-content", { "name-key": "tab-01", selected: this.selectedTab === 'tab-01', onbeforematch: () => this.selectedTab = 'tab-01' }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Aerospace & Defense"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-02", selected: this.selectedTab === 'tab-02', onbeforematch: () => this.selectedTab = 'tab-02' }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Automotive"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-03", selected: this.selectedTab === 'tab-03', onbeforematch: () => this.selectedTab = 'tab-03' }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Electronics & High-Tech"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Deliver the future of transportation and mobility and gain competitive advantage. Explore automotive solutions for OEMs and suppliers so your team can help drive the future of transportation."), h("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-04", selected: this.selectedTab === 'tab-04', onbeforematch: () => this.selectedTab = 'tab-04' }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Retail & Consumer Products"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")))))));
+    h("div", { class: "mobile-wrapper" }, h("div", { class: "acc-item" }, h("fl-tab-header", { "value-key": 1, "name-key": "tab-01", "tab-title": "Aerospace & Defense", selected: this.selectedTab === "tab-01" }, " "), h("fl-tab-content", { "value-key": 1, "name-key": "tab-01", selected: this.selectedTab === "tab-01", onbeforematch: () => (this.selectedTab = "tab-01") }, h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, h("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h("a", { href: "https://www.google.com", tabIndex: 0 }, "See More about Aerospace & Defense"))), h("div", { class: "acc-item" }, h("fl-tab-header", { "value-key": 2, "name-key": "tab-02", "tab-title": "Automotive", selected: this.selectedTab === "tab-02" }), h("fl-tab-content", { "value-key": 2, "name-key": "tab-02", selected: this.selectedTab === "tab-02", onbeforematch: () => (this.selectedTab = "tab-02") }, h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: "https://www.google.com", tabIndex: 0 }, "See More about Aerospace & Defense"))), h("div", { class: "acc-item" }, h("fl-tab-header", { "value-key": 3, "name-key": "tab-03", "tab-title": "Electronics & High-Tech", selected: this.selectedTab === "tab-03" }), h("fl-tab-content", { "value-key": 3, "name-key": "tab-03", selected: this.selectedTab === "tab-03", onbeforematch: () => (this.selectedTab = "tab-03") }, h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, h("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h("a", { href: "https://www.google.com", tabIndex: 0 }, "See More about Aerospace & Defense"))), h("div", { class: "acc-item" }, h("fl-tab-header", { "value-key": 4, "name-key": "tab-04", "tab-title": "Retail & Consumer Products", selected: this.selectedTab === "tab-04" }), h("fl-tab-content", { "value-key": 4, "name-key": "tab-04", selected: this.selectedTab === "tab-04", onbeforematch: () => (this.selectedTab = "tab-04") }, h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: "https://www.google.com", tabIndex: 0 }, "See More about Aerospace & Defense"))))) : (
+    // Code for Desktop only
+    h("div", { class: "non-mobile-wrapper" }, h("div", { class: "header-list-wrap" }, h("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", selected: this.selectedTab === "tab-01" }, " "), h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive", selected: this.selectedTab === "tab-02" }), h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech", selected: this.selectedTab === "tab-03" }), h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products", selected: this.selectedTab === "tab-04" })), h("div", { class: "content-wrap" }, h("fl-tab-content", { "name-key": "tab-01", selected: this.selectedTab === "tab-01", onbeforematch: () => (this.selectedTab = "tab-01") }, h("ptc-title", { type: "h3", "title-size": "large", upperline: "no-upperline", "title-margin": "margin-flush" }, "Aerospace & Defense"), h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, h("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h("a", { href: "https://www.google.com", tabIndex: 0 }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-02", selected: this.selectedTab === "tab-02", onbeforematch: () => (this.selectedTab = "tab-02") }, h("ptc-title", { type: "h3", "title-size": "large", upperline: "no-upperline", "title-margin": "margin-flush" }, "Automotive"), h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: "https://www.google.com", tabIndex: 0 }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-03", selected: this.selectedTab === "tab-03", onbeforematch: () => (this.selectedTab = "tab-03") }, h("ptc-title", { type: "h3", "title-size": "large", upperline: "no-upperline", "title-margin": "margin-flush" }, "Electronics & High-Tech"), h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, "Deliver the future of transportation and mobility and gain competitive advantage. Explore automotive solutions for OEMs and suppliers so your team can help drive the future of transportation."), h("a", { href: "https://www.google.com", tabIndex: 0 }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-04", selected: this.selectedTab === "tab-04", onbeforematch: () => (this.selectedTab = "tab-04") }, h("ptc-title", { type: "h3", "title-size": "large", upperline: "no-upperline", "title-margin": "margin-flush" }, "Retail & Consumer Products"), h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, h("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h("a", { href: "https://www.google.com", tabIndex: 0 }, "See More about Aerospace & Defense")))))));
   }
   static get is() { return "ptc-featured-list"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-filter-dropdown/ptc-filter-dropdown.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-filter-dropdown/ptc-filter-dropdown.js

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h, } from "@stencil/core";
 export class PtcFilterDropdown {
   constructor() {
     this.internalOptions = [];
@@ -13,21 +13,26 @@ export class PtcFilterDropdown {
     self.clearFilter();
   }
   async setSelectedItem(tabId, tagName, value) {
-    const isExistingOption = (this.selectedOptions || []).find(opt => opt.tabId === tabId && opt.tagName === tagName && opt.value === value);
+    const isExistingOption = (this.selectedOptions || []).find((opt) => opt.tabId === tabId &&
+      opt.tagName === tagName &&
+      opt.value === value);
     if (!isExistingOption) {
-      this.selectedOptions = [...(this.selectedOptions || []), { tabId, tagName, value }];
+      this.selectedOptions = [
+        ...(this.selectedOptions || []),
+        { tabId, tagName, value },
+      ];
     }
   }
   componentDidLoad() {
-    this.dropdownPlaceholder = this.hostElement.shadowRoot.querySelector('.dropdown-placeholder .dropdown-filter-name');
+    this.dropdownPlaceholder = this.hostElement.shadowRoot.querySelector(".dropdown-placeholder .dropdown-filter-name");
   }
   parseOptions() {
-    let options = Array.from(this.hostElement.querySelectorAll('span'));
+    let options = Array.from(this.hostElement.querySelectorAll("span"));
     if (options) {
       this.internalOptions = options.map((option) => ({
-        tabId: option.getAttribute('tab-id'),
+        tabId: option.getAttribute("tab-id"),
         value: option.textContent,
-        tagName: option.getAttribute('tag-name'), // Store tag name in the options
+        tagName: option.getAttribute("tag-name"), // Store tag name in the options
       }));
     }
   }
@@ -36,8 +41,8 @@ export class PtcFilterDropdown {
     if (focusInput) {
       requestAnimationFrame(() => {
         var _a;
-        const selected = this.hostElement.shadowRoot.querySelector('.filter-list input:checked');
-        const firstInput = this.hostElement.shadowRoot.querySelector('.filter-list input');
+        const selected = this.hostElement.shadowRoot.querySelector(".filter-list input:checked");
+        const firstInput = this.hostElement.shadowRoot.querySelector(".filter-list input");
         (_a = (selected || firstInput)) === null || _a === void 0 ? void 0 : _a.focus();
       });
     }
@@ -53,7 +58,7 @@ export class PtcFilterDropdown {
     if (this.dropdownPlaceholder) {
       this.dropdownPlaceholder.textContent = this.placeholder;
     }
-    this.emitSelectedOptions('clearButton');
+    this.emitSelectedOptions("clearButton");
   }
   emitSelectedOptions(clickedButton) {
     var _a;
@@ -61,46 +66,50 @@ export class PtcFilterDropdown {
     this.selectedOptions = this.internalOptions
       .filter((option) => {
       const id = option.tabId;
-      return this.hostElement.shadowRoot.querySelector(`input[tab-id="${id}"]:checked`) !== null;
+      return (this.hostElement.shadowRoot.querySelector(`input[tab-id="${id}"]:checked`) !== null);
     })
       .map((option) => ({
       tabId: option.tabId,
       value: option.value,
-      tagName: option.tagName
+      tagName: option.tagName,
     }));
     this.selectedFilterValues.emit({
       sender: this,
       selectedOptions: this.selectedOptions,
     });
-    if (clickedButton == 'applyButton') {
+    if (clickedButton == "applyButton") {
       this.toggleDropdown();
     }
     if (this.dropdownPlaceholder) {
-      this.dropdownPlaceholder.textContent = (_a = this.selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value;
+      this.dropdownPlaceholder.textContent =
+        (_a = this.selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value;
     }
   }
   componentWillRender() {
     this.parseOptions();
   }
   handleKeyDown(e) {
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       this.toggleDropdown(true); // Focus after Enter
     }
-    else if (e.key === 'Tab' && this.isOpen) {
+    else if (e.key === "Tab" && this.isOpen) {
       // Let browser do default tabbing, but also guide focus inside dropdown
       requestAnimationFrame(() => {
         var _a;
-        const selected = this.hostElement.shadowRoot.querySelector('.filter-list input:checked');
-        const firstInput = this.hostElement.shadowRoot.querySelector('.filter-list input');
+        const selected = this.hostElement.shadowRoot.querySelector(".filter-list input:checked");
+        const firstInput = this.hostElement.shadowRoot.querySelector(".filter-list input");
         (_a = (selected || firstInput)) === null || _a === void 0 ? void 0 : _a.focus();
       });
     }
   }
   render() {
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle mf-listen", onClick: () => this.toggleDropdown(true), tabIndex: 0, onKeyDown: (e) => { this.handleKeyDown(e); } }, h("span", { class: "dropdown-placeholder" }, h("strong", null, "Filter: "), h("span", { class: "dropdown-filter-name" }, this.placeholder)), h("span", { class: "caret" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none" }, h("path", { d: "M10.2426 1.24264L6 5.48528L1.75736 1.24264", stroke: "#20262A", "stroke-width": "2", "stroke-linecap": "round" })))), this.isOpen && (h("div", { class: "dropdown-menu" }, h("ul", { class: "filter-list" }, this.internalOptions.map((option) => (h("li", { key: option.tabId }, h("label", { class: "radio-label", htmlFor: option.value.replace(/\s+/g, '') }, h("input", { type: "radio", id: option.value.replace(/\s+/g, ''), name: "theater-filter", value: option.value, checked: this.selectedOptions.some((item) => item.value === option.value), "tab-id": option.tabId, "tag-name": option.tagName }), option.value))))), h("div", { class: "filter-btns" }, h("span", { class: "clear-btn mf-listen", onClick: () => this.clearFilter(), tabIndex: 0, onKeyDown: (e) => {
-        if (e.key === 'Enter')
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle mf-listen", onClick: () => this.toggleDropdown(true), tabIndex: 0, onKeyDown: (e) => {
+        this.handleKeyDown(e);
+      } }, h("span", { class: "dropdown-placeholder" }, h("strong", null, "Filter: "), h("span", { class: "dropdown-filter-name" }, this.placeholder)), h("span", { class: "caret" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none" }, h("path", { d: "M10.2426 1.24264L6 5.48528L1.75736 1.24264", stroke: "#20262A", "stroke-width": "2", "stroke-linecap": "round" })))), this.isOpen && (h("div", { class: "dropdown-menu" }, h("ul", { class: "filter-list" }, this.internalOptions.map((option) => (h("li", { key: option.tabId }, h("label", { class: "radio-label", htmlFor: option.value.replace(/\s+/g, "") }, h("input", { type: "radio", id: option.value.replace(/\s+/g, ""), name: "theater-filter", value: option.value, checked: this.selectedOptions.some((item) => item.value ===
+        option.value), "tab-id": option.tabId, "tag-name": option.tagName }), option.value))))), h("div", { class: "filter-btns" }, h("span", { class: "clear-btn mf-listen", onClick: () => this.clearFilter(), tabIndex: 0, onKeyDown: (e) => {
+        if (e.key === "Enter")
           this.clearFilter();
-      } }, "Clear"), h("ptc-button", { "tracker-id": "filter-apply-cta", type: "link", color: "ptc-secondary", onClick: () => this.emitSelectedOptions('applyButton'), styles: ' a span { font-size: 16px !important;  } a{ padding: 10px 16px !important; }' }, "Apply"))))), h("div", { class: "hidden" }, h("slot", null))));
+      } }, "Clear"), h("ptc-button", { "tracker-id": "filter-apply-cta", type: "link", color: "ptc-secondary", onClick: () => this.emitSelectedOptions("applyButton"), styles: " a span { font-size: 16px !important;  } a{ padding: 10px 16px !important; }" }, "Apply"))))), h("div", { class: "hidden" }, h("slot", null))));
   }
   static get is() { return "ptc-filter-dropdown"; }
   static get encapsulation() { return "shadow"; }