@ptcwebops/ptcw-design 2.0.5 → 2.0.7

package/dist/cjs/featured-list.cjs.entry.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-88135a6b.js');
+
+const featuredListCss = "a {\r\n    font-family: var(--ptc-font-latin);\r\n    font-style: var(--ptc-font-style-normal);\r\n    text-decoration-line: underline;\r\n    color: var(--color-blue-07);\r\n    transition: color var(--ptc-transition-medium) var(--ptc-ease-out);\r\n    font-weight: var(--ptc-font-weight-bold);\r\n\r\n    &:visited {\r\n        color: var(--color-blue-10);\r\n    }\r\n\r\n    &:active,\r\n    &:visited:active {\r\n        // pressed\r\n        color: var(--color-blue-09);\r\n    }\r\n\r\n    &:hover,\r\n    &:visited:hover {\r\n        color: var(--color-blue-08);\r\n    }\r\n\r\n    &.disabled {\r\n        color: var(--color-gray-04) !important;\r\n        cursor: not-allowed;\r\n    }\r\n}\r\n\r\n.light-links,.background-grey-10,.background-plm-grey  {\r\n    a, a.light-link {\r\n        color: var(--color-blue-04);\r\n\r\n        &:visited {\r\n            color: var(--color-blue-06);\r\n        }\r\n\r\n        &:active,\r\n        &:visited:active {\r\n            // pressed\r\n            color: var(--color-blue-07);\r\n        }\r\n\r\n        &:hover,\r\n        &:visited:hover {\r\n            color: var(--color-blue-05);\r\n        }\r\n\r\n        &.disabled {\r\n            color: var(--color-gray-04) !important;\r\n            cursor: not-allowed;\r\n        }\r\n    }\r\n}\r\n\r\n.ptc-link {\r\n    color: var(--color-gray-10);\r\n    text-decoration: underline;\r\n    text-decoration-thickness: 2px;\r\n    text-decoration-color: var(--color-green-06);\r\n    text-underline-offset: 5px;\r\n    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n\r\n    &:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:visited {\r\n        color: var(--color-gray-10);\r\n    }\r\n\r\n    &:active,\r\n    &:visited:active {\r\n        // pressed\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:hover,\r\n    &:visited:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n}\r\n\r\n.ptc-link-dark {\r\n    color: var(--color-white);\r\n    text-decoration: underline;\r\n    text-decoration-thickness: 2px;\r\n    text-decoration-color: var(--color-green-06);\r\n    text-underline-offset: 5px;\r\n    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n\r\n    &:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:visited {\r\n        color: var(--color-white);\r\n    }\r\n\r\n    &:active,\r\n    &:visited:active {\r\n        // pressed\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:hover,\r\n    &:visited:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n}\r\n :host {\r\n\t display: block;\r\n\t box-sizing: border-box;\r\n}\r\n :host ptc-background-video {\r\n\t height: 240px;\r\n}\r\n @media (min-width: 480px) {\r\n\t :host ptc-background-video {\r\n\t\t height: 320px;\r\n\t}\r\n}\r\n @media (min-width: 768px) {\r\n\t :host ptc-background-video {\r\n\t\t height: 450px;\r\n\t}\r\n}\r\n @media (min-width: 992px) {\r\n\t :host ptc-background-video {\r\n\t\t height: 500px;\r\n\t}\r\n}\r\n :host .fl-header {\r\n\t cursor: pointer;\r\n}\r\n :host .non-mobile-wrapper {\r\n\t box-sizing: border-box;\r\n}\r\n @media (min-width: 992px) {\r\n\t :host .non-mobile-wrapper {\r\n\t\t max-width: 1078px;\r\n\t\t margin: -75px auto 0 auto;\r\n\t\t display: flex;\r\n\t\t align-items: center;\r\n\t\t width: 100%;\r\n\t\t background: var(--color-white);\r\n\t\t box-shadow: var(--ptc-shadow-small);\r\n\t\t padding: 24px 32px;\r\n\t\t z-index: 1;\r\n\t\t position: relative;\r\n\t\t min-height: 350px;\r\n\t}\r\n}\r\n @media (min-width: 992px) {\r\n\t :host .non-mobile-wrapper .header-list-wrap {\r\n\t\t padding-right: 16px;\r\n\t\t margin-right: 64px;\r\n\t\t min-width: 270px;\r\n\t\t max-width: 270px;\r\n\t\t box-sizing: border-box;\r\n\t\t display: flex;\r\n\t\t flex-direction: column;\r\n\t\t align-items: baseline;\r\n\t}\r\n\t :host .non-mobile-wrapper .header-list-wrap::after {\r\n\t\t content: \"\";\r\n\t\t width: 1px;\r\n\t\t height: calc(100% - 48px);\r\n\t\t background-color: var(--color-gray-05);\r\n\t\t position: absolute;\r\n\t\t left: 297px;\r\n\t\t top: 24px;\r\n\t\t bottom: 24px;\r\n\t}\r\n}\r\n @media (min-width: 992px) {\r\n\t :host .non-mobile-wrapper .content-wrap {\r\n\t\t padding-right: 72px;\r\n\t}\r\n}\r\n :host .non-mobile-wrapper .fl-header {\r\n\t border-radius: 4px;\r\n\t margin: 12px 0;\r\n\t padding: 4px 8px;\r\n}\r\n :host .non-mobile-wrapper .fl-header:hover {\r\n\t background-color: var(--color-gray-02);\r\n}\r\n :host .non-mobile-wrapper .fl-header.selected, :host .non-mobile-wrapper .fl-header.init-active {\r\n\t background-color: var(--color-gray-03);\r\n}\r\n :host .mobile-wrapper .acc-item {\r\n\t border-bottom: 1px solid var(--color-gray-03);\r\n\t padding: 14px 30px;\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-header {\r\n\t padding-left: 34px;\r\n\t position: relative;\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-header::before {\r\n\t content: '';\r\n\t display: inline-block;\r\n\t width: 16px;\r\n\t height: 16px;\r\n\t background-image: url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_91_790)\"><path d=\"M15.9001 6.29998H9.7001V0.0999756H6.3001V6.29998H0.100098V9.69998H6.3001V15.9H9.7001V9.69998H15.9001V6.29998Z\" fill=\"%23006E09\"/></g><defs><clipPath id=\"clip0_91_790\"><rect width=\"16\" height=\"16\" fill=\"white\"/></clipPath></defs></svg>');\r\n\t vertical-align: middle;\r\n\t position: absolute;\r\n\t left: 0;\r\n\t top: 4.5px;\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-header.selected::before, :host .mobile-wrapper .acc-item fl-tab-header.init-active::before {\r\n\t background-image: url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_113_741)\"><path d=\"M0 7.05566V10.8637H13.913V7.05566H0Z\" fill=\"%23323B42\"/></g><defs><clipPath id=\"clip0_113_741\"><rect width=\"13.913\" height=\"17.92\" fill=\"white\"/></clipPath></defs></svg>');\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-content {\r\n\t padding-left: 34px;\r\n\t padding-bottom: 18px;\r\n}\r\n";
+
+const FeaturedList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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");
+      }
+      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);
+    });
+    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");
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "featured-image-wrap" }, index.h("fl-tab-image", { "name-key": "tab-01", class: "init-active" }, index.h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" })), index.h("fl-tab-image", { "name-key": "tab-02" }, index.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" })), index.h("fl-tab-image", { "name-key": "tab-03" }, index.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" })), index.h("fl-tab-image", { "name-key": "tab-04" }, index.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
+    index.h("div", { class: "mobile-wrapper" }, index.h("div", { class: 'acc-item' }, index.h("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), index.h("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, index.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."), index.h("a", { href: '#' }, "See More about Aerospace & Defense"))), index.h("div", { class: 'acc-item' }, index.h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), index.h("fl-tab-content", { "name-key": "tab-02" }, index.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."), index.h("a", { href: '#' }, "See More about Aerospace & Defense"))), index.h("div", { class: 'acc-item' }, index.h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), index.h("fl-tab-content", { "name-key": "tab-03" }, index.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."), index.h("a", { href: '#' }, "See More about Aerospace & Defense"))), index.h("div", { class: 'acc-item' }, index.h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" }), index.h("fl-tab-content", { "name-key": "tab-04" }, index.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."), index.h("a", { href: '#' }, "See More about Aerospace & Defense")))))
+      :
+        (
+        // Code for Desktop only
+        index.h("div", { class: "non-mobile-wrapper" }, index.h("div", { class: "header-list-wrap" }, index.h("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), index.h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), index.h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), index.h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" })), index.h("div", { class: "content-wrap" }, index.h("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, index.h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Aerospace & Defense"), index.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."), index.h("a", { href: '#' }, "See More about Aerospace & Defense")), index.h("fl-tab-content", { "name-key": "tab-02" }, index.h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Automotive"), index.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."), index.h("a", { href: '#' }, "See More about Aerospace & Defense")), index.h("fl-tab-content", { "name-key": "tab-03" }, index.h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Electronics & High-Tech"), index.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."), index.h("a", { href: '#' }, "See More about Aerospace & Defense")), index.h("fl-tab-content", { "name-key": "tab-04" }, index.h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Retail & Consumer Products"), index.h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Navigate supply chain disruption while maximizing revenue growth and sustainability. Explore how PTC\u2019s digital solutions can accelerate product innovation, supply chain collaboration, and more."), index.h("a", { href: '#' }, "See More about Aerospace & Defense")))))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+FeaturedList.style = featuredListCss;
+
+exports.featured_list = FeaturedList;