@ptcwebops/ptcw-design 3.1.7 → 3.1.9

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

@@ -1,128 +1,128 @@
-import { Host, h } from '@stencil/core';
-export class PtcFeaturedList {
-  constructor() {
-    this.isMobile = undefined;
-    this.selectedTabGloble = 'tab-01';
-  }
-  handleResize() {
-    this.isMobile = window.innerWidth < 992;
-    this.holdTabOnResize(this.selectedTabGloble);
-  }
-  componentWillLoad() {
-    this.isMobile = window.innerWidth < 992;
-  }
-  handleflTabClicked(event) {
-    this.selectedTabGloble = event.detail.name;
-    this.selectTab(this.selectedTabGloble);
-  }
-  holdTabOnResize(name) {
-    const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
-    const headerBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-header`);
-    contentBlocks.forEach(content => {
-      if (content.classList.contains("init-active")) {
-        content.classList.remove("init-active");
-      }
-      content.getAttribute('name-key') === name ? (content.setAttribute('selected', 'selected')) : (content.removeAttribute('selected'));
-    });
-    headerBlocks.forEach(header => {
-      if (header.classList.contains("init-active")) {
-        header.classList.remove("init-active");
-        if (header.querySelector('p')) {
-          header.querySelector('p').classList.remove('selected-p-init');
-        }
-      }
-      header.getAttribute('name-key') === name ? (header.setAttribute('selected', 'selected')) : (header.removeAttribute('selected'));
-    });
-  }
-  selectTab(name) {
-    const featuredImages = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-image`);
-    const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
-    const headerBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-header`);
-    featuredImages.forEach(image => {
-      if (image.classList.contains("init-active")) {
-        image.classList.remove("init-active");
-      }
-      image.getAttribute('name-key') === name ? (image.setAttribute('selected', 'selected')) : (image.removeAttribute('selected'));
-    });
-    contentBlocks.forEach(content => {
-      this.updateActiveTab(name, content);
-      //  Added code to recall readmore for hidden tabs
-      if (content.getAttribute('name-key') === name) {
-        const readMoreComp = content.querySelector('ptc-readmore');
-        if (readMoreComp) {
-          readMoreComp.updateReadmoreStatus();
-        }
-      }
-    });
-    headerBlocks.forEach(header => {
-      this.updateActiveTab(name, header);
-    });
-  }
-  updateActiveTab(name, tabName) {
-    if (this.isMobile) {
-      if (tabName.getAttribute('name-key') === name) {
-        if (tabName.classList.contains("init-active")) {
-          tabName.removeAttribute('selected');
-        }
-        else {
-          tabName.getAttribute('selected') == 'selected' ? (tabName.removeAttribute('selected')) : (tabName.setAttribute('selected', 'selected'));
-        }
-      }
-      else {
-        tabName.removeAttribute('selected');
-      }
-    }
-    else {
-      tabName.getAttribute('name-key') === name ? (tabName.setAttribute('selected', 'selected')) : (tabName.removeAttribute('selected'));
-    }
-    if (tabName.classList.contains("init-active")) {
-      tabName.classList.remove("init-active");
-      if (tabName.querySelector('p')) {
-        tabName.querySelector('p').classList.remove('selected-p-init');
-      }
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "featured-image-wrap" }, h("fl-tab-image", { "name-key": "tab-01", class: "init-active" }, 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" }, 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" }, 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" }, 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", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, 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: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), h("fl-tab-content", { "name-key": "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: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h("fl-tab-content", { "name-key": "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: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" }), h("fl-tab-content", { "name-key": "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: '#' }, "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", class: "init-active" }, " "), h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" })), h("div", { class: "content-wrap" }, h("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, 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: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "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: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "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: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "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: '#' }, "See More about Aerospace & Defense")))))));
-  }
-  static get is() { return "ptc-featured-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-featured-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-featured-list.css"]
-    };
-  }
-  static get states() {
-    return {
-      "isMobile": {},
-      "selectedTabGloble": {}
-    };
-  }
-  static get elementRef() { return "hostElement"; }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "flTabClicked",
-        "method": "handleflTabClicked",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcFeaturedList {
+  constructor() {
+    this.isMobile = undefined;
+    this.selectedTabGloble = 'tab-01';
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth < 992;
+    this.holdTabOnResize(this.selectedTabGloble);
+  }
+  componentWillLoad() {
+    this.isMobile = window.innerWidth < 992;
+  }
+  handleflTabClicked(event) {
+    this.selectedTabGloble = event.detail.name;
+    this.selectTab(this.selectedTabGloble);
+  }
+  holdTabOnResize(name) {
+    const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
+    const headerBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-header`);
+    contentBlocks.forEach(content => {
+      if (content.classList.contains("init-active")) {
+        content.classList.remove("init-active");
+      }
+      content.getAttribute('name-key') === name ? (content.setAttribute('selected', 'selected')) : (content.removeAttribute('selected'));
+    });
+    headerBlocks.forEach(header => {
+      if (header.classList.contains("init-active")) {
+        header.classList.remove("init-active");
+        if (header.querySelector('p')) {
+          header.querySelector('p').classList.remove('selected-p-init');
+        }
+      }
+      header.getAttribute('name-key') === name ? (header.setAttribute('selected', 'selected')) : (header.removeAttribute('selected'));
+    });
+  }
+  selectTab(name) {
+    const featuredImages = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-image`);
+    const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
+    const headerBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-header`);
+    featuredImages.forEach(image => {
+      if (image.classList.contains("init-active")) {
+        image.classList.remove("init-active");
+      }
+      image.getAttribute('name-key') === name ? (image.setAttribute('selected', 'selected')) : (image.removeAttribute('selected'));
+    });
+    contentBlocks.forEach(content => {
+      this.updateActiveTab(name, content);
+      //  Added code to recall readmore for hidden tabs
+      if (content.getAttribute('name-key') === name) {
+        const readMoreComp = content.querySelector('ptc-readmore');
+        if (readMoreComp) {
+          readMoreComp.updateReadmoreStatus();
+        }
+      }
+    });
+    headerBlocks.forEach(header => {
+      this.updateActiveTab(name, header);
+    });
+  }
+  updateActiveTab(name, tabName) {
+    if (this.isMobile) {
+      if (tabName.getAttribute('name-key') === name) {
+        if (tabName.classList.contains("init-active")) {
+          tabName.removeAttribute('selected');
+        }
+        else {
+          tabName.getAttribute('selected') == 'selected' ? (tabName.removeAttribute('selected')) : (tabName.setAttribute('selected', 'selected'));
+        }
+      }
+      else {
+        tabName.removeAttribute('selected');
+      }
+    }
+    else {
+      tabName.getAttribute('name-key') === name ? (tabName.setAttribute('selected', 'selected')) : (tabName.removeAttribute('selected'));
+    }
+    if (tabName.classList.contains("init-active")) {
+      tabName.classList.remove("init-active");
+      if (tabName.querySelector('p')) {
+        tabName.querySelector('p').classList.remove('selected-p-init');
+      }
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "featured-image-wrap" }, h("fl-tab-image", { "name-key": "tab-01", class: "init-active" }, 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" }, 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" }, 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" }, 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", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, 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: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), h("fl-tab-content", { "name-key": "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: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h("fl-tab-content", { "name-key": "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: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" }), h("fl-tab-content", { "name-key": "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: '#' }, "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", class: "init-active" }, " "), h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" })), h("div", { class: "content-wrap" }, h("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, 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: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "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: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "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: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "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: '#' }, "See More about Aerospace & Defense")))))));
+  }
+  static get is() { return "ptc-featured-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-featured-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-featured-list.css"]
+    };
+  }
+  static get states() {
+    return {
+      "isMobile": {},
+      "selectedTabGloble": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "flTabClicked",
+        "method": "handleflTabClicked",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -22,6 +22,13 @@
   min-height: 34px;
   border-radius: 4px;
 }
+:host .dropdown .dropdown-toggle .dropdown-placeholder {
+  display: flex;
+}
+:host .dropdown .dropdown-toggle .dropdown-placeholder .dropdown-filter-name {
+  padding-left: 10px;
+  padding-right: 5px;
+}
 :host .dropdown .caret {
   display: inline-block;
   vertical-align: middle;

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

@@ -1,134 +1,143 @@
-import { Host, h } from '@stencil/core';
-export class PtcFilterDropdown {
-  constructor() {
-    this.internalOptions = [];
-    this.selectedOptions = [];
-    this.placeholder = undefined;
-    this.selectedTag = undefined;
-    this.isOpen = false;
-  }
-  parseOptions() {
-    let options = Array.from(this.hostElement.querySelectorAll('span'));
-    if (options) {
-      this.internalOptions = options.map((option) => ({
-        tabId: option.getAttribute('tab-id'),
-        value: option.textContent,
-        tagName: option.getAttribute('tag-name'), // Store tag name in the options
-      }));
-    }
-    //console.log(this.internalOptions);
-  }
-  toggleDropdown() {
-    this.isOpen = !this.isOpen;
-  }
-  clearFilter() {
-    this.selectedOptions = [];
-    const radioList = this.hostElement.shadowRoot.querySelectorAll('.filter-list input[type="radio"]');
-    radioList.forEach((radioItem) => {
-      if (radioItem instanceof HTMLInputElement) {
-        radioItem.checked = false;
-      }
-    });
-    //this.emitSelectedOptions();
-  }
-  emitSelectedOptions() {
-    // debugger
-    this.selectedOptions = this.internalOptions
-      .filter((option) => {
-      const id = option.tabId;
-      return this.hostElement.shadowRoot.querySelector(`input[tab-id="${id}"]:checked`) !== null;
-    })
-      .map((option) => ({
-      tabId: option.tabId,
-      value: option.value,
-      tagName: option.tagName
-    }));
-    this.selectedFilterValues.emit({
-      sender: this,
-      selectedOptions: this.selectedOptions,
-    });
-    this.toggleDropdown();
-  }
-  componentWillRender() {
-    this.parseOptions();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown() }, h("span", { class: "dropdown-placeholder" }, h("strong", null, "Filter: "), 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", onClick: () => this.clearFilter() }, "Clear"), h("ptc-button", { type: "link", color: "ptc-secondary", onClick: () => this.emitSelectedOptions(), 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"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-filter-dropdown.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-filter-dropdown.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "selectedTag": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "selected-tag",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "internalOptions": {},
-      "selectedOptions": {},
-      "isOpen": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "selectedFilterValues",
-        "name": "selectedFilterValues",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-}
+import { Host, h } from '@stencil/core';
+export class PtcFilterDropdown {
+  constructor() {
+    this.internalOptions = [];
+    this.selectedOptions = [];
+    this.placeholder = undefined;
+    this.selectedTag = undefined;
+    this.isOpen = false;
+  }
+  componentDidLoad() {
+    this.dropdownPlaceholder = this.hostElement.shadowRoot.querySelector('.dropdown-placeholder .dropdown-filter-name');
+  }
+  parseOptions() {
+    let options = Array.from(this.hostElement.querySelectorAll('span'));
+    if (options) {
+      this.internalOptions = options.map((option) => ({
+        tabId: option.getAttribute('tab-id'),
+        value: option.textContent,
+        tagName: option.getAttribute('tag-name'), // Store tag name in the options
+      }));
+    }
+    //console.log(this.internalOptions);
+  }
+  toggleDropdown() {
+    this.isOpen = !this.isOpen;
+  }
+  clearFilter() {
+    this.selectedOptions = [];
+    const radioList = this.hostElement.shadowRoot.querySelectorAll('.filter-list input[type="radio"]');
+    radioList.forEach((radioItem) => {
+      if (radioItem instanceof HTMLInputElement) {
+        radioItem.checked = false;
+      }
+    });
+    //this.emitSelectedOptions();
+    if (this.dropdownPlaceholder) {
+      this.dropdownPlaceholder.textContent = this.placeholder;
+    }
+  }
+  emitSelectedOptions() {
+    // debugger
+    this.selectedOptions = this.internalOptions
+      .filter((option) => {
+      const id = option.tabId;
+      return this.hostElement.shadowRoot.querySelector(`input[tab-id="${id}"]:checked`) !== null;
+    })
+      .map((option) => ({
+      tabId: option.tabId,
+      value: option.value,
+      tagName: option.tagName
+    }));
+    this.selectedFilterValues.emit({
+      sender: this,
+      selectedOptions: this.selectedOptions,
+    });
+    this.toggleDropdown();
+    if (this.dropdownPlaceholder) {
+      this.dropdownPlaceholder.textContent = this.selectedOptions[0].value;
+    }
+  }
+  componentWillRender() {
+    this.parseOptions();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown() }, 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", onClick: () => this.clearFilter() }, "Clear"), h("ptc-button", { type: "link", color: "ptc-secondary", onClick: () => this.emitSelectedOptions(), 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"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-filter-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-filter-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "selectedTag": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-tag",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "internalOptions": {},
+      "selectedOptions": {},
+      "isOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectedFilterValues",
+        "name": "selectedFilterValues",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.css

@@ -146,6 +146,11 @@ a.disabled {
 :host .filter-section {
   max-width: 400px;
 }
+@media only screen and (min-width: 992px) {
+  :host .filter-section {
+    max-width: 600px;
+  }
+}
 :host .filter-section ptc-product-dropdown {
   color: var(--color-gray-10);
 }