@ptcwebops/ptcw-design 3.2.4 → 3.2.5

package/dist/collection/components/ptc-white-paper/ptc-white-paper.js

@@ -0,0 +1,425 @@
+import { Host, h } from '@stencil/core';
+export class PtcWhitePaper {
+  constructor() {
+    this.items = [
+      {
+        component1: {
+          type: 'two-column-with-text-media',
+          heading: 'Why Now Is the Time to Use Advanced Technologies to Remotely Connect Your Medical Devices',
+          subHeading: 'Subheading text',
+          leftColumnContent: `There is growing interest in using the Internet of
+          Things (IoT) in medical devices. The data gathered
+          with IoT-enabled medical devices—the so-called
+          Internet of Medical Things (IoMT) devices—can be
+          used to remotely monitor and fix devices. The use
+          of IoT brings numerous benefits. Medical device
+          manufacturers can incorporate data collected from
+          their fleet of products in the field into product
+          design considerations. They can also leverage the
+          data to offer innovative services that differentiate
+          them from the competition.<br />
+          <br />
+          To get a better understanding of how advanced
+          technologies like IoT are being used to connect
+          medical devices remotely, we recently sat
+          down with Rene Zoelfl, Business Development
+          Director, PTC.<br />
+          <br />
+          We explored the role of IoT in medical devices
+          for remote management, how the technology is
+          being used, how the technology can support
+          new business models, and then covered some
+          real-world examples of the IoMT in action.<br />
+          <br />
+          <img alt="zoelfl1" src="https://www.ptc.com/-/media/99F1C78BD774420AB51AA313C2D560D9.ashx" /><br />
+          <strong>RTInsights:</strong> How can manufacturers, healthcare
+          facilities, and patients best benefit from remote
+          monitoring?<br />
+          <br />
+          <strong>Zoelfl:</strong> I would say remote monitoring gives two
+          main benefits. One is remote monitoring lets
+          device manufacturers optimize their processes,
+          and the other benefit is that they can optimize the
+          relationship with their customers, clients, and
+          patients. These things can help transform the way
+          they are doing business.<br />
+          <br />`,
+          rightColumnContent: `What are the key advanced technologies that are
+          enabling innovations in the design and use of
+          remote devices? On one hand, we have IoT technologies
+          that enable connectivity, advanced
+          analytics or artificial intelligence, and the ability to
+          automate decisions and processes to a higher level.
+          The other key element, the other key technology,
+          I'd like to highlight is augmented reality, which
+          gives us a different way, a different capability, to
+          interact with equipment in the context of its use
+          and in the context of the location where it is used.<br />
+          <br />
+          <img alt="zoelfl1b" src="https://www.ptc.com/-/media/2161D33FD40E43D8BD453C4BC6C1CFC5.ashx" /><br />
+          <strong>RTInsights:</strong> How can companies use these technologies
+          in the product life cycle?<br />
+          <br />
+          <strong>Zoelfl:</strong> There are multiple ways. Where to begin?
+          A manufacturer can use IoT technologies internally.
+          They can make sure that when teams are working
+          together on the design of new products, they can
+          more easily communicate and get access to the
+          generated data. Then they also could have the
+          same capabilities or the same technologies to use
+          when it comes to handing over that information
+          into manufacturing.<br />
+          <br />
+          For instance, when a manufacturer thinks about
+          non-conformances that might occur in the manufacturing
+          process, because of maybe some difficult
+          designs, or maybe some materials that they have
+          selected, they can feed that information back into
+          the development and engineering organizations.
+          They can react much faster before the product
+          might have left the company and not when it is at
+          the patient or the caregiving facility.`,
+        },
+      },
+      {
+        component2: {
+          type: 'fullspan-media',
+          heading: '',
+          subHeading: `<h3>Case Study: Digital Transformation for Service Optimization</h3>
+        <p>A major manufacturer of power equipment fueled its service
+        network by streamlining dealership networks and the end
+        users they service.</p>
+        <ul>
+        <li>The OEM embedded Industrial Internet of Things (IIoT)
+        technologies into its products to gain visibility, which derivatively
+        impacted critical service and operational KPIs for its dealership
+        and end user. This also offloaded service-related costs (warranty,
+        total cost of ownership, truck rolls etc.) from its outstanding
+        liabilities.</li>
+        <li>The dealership improved the customer relationship by increasing
+        asset uptime and optimizing service delivery costs through
+        equipping technicians with critical repair insights for severity,
+        proximity, skillset, and remediating actions required.</li>
+        <li>The end user operating a mine in a sub-zero environment
+        improved the reliability, availability, and uptime of mission-critical
+        assets.</li>
+        </ul>
+        <p>While the service network can take many different complex
+        forms, this example illustrates the mutually beneficial impact
+        and largely untapped potential of gaining visibility across the
+        service lifecycle.</p>`,
+          mainImage: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c01e7beaaccc4ff9a33bd1b07c04a50a',
+          mainImageAlt: 'reducing-service-costs-1',
+          mainImageDescription: 'Some image description',
+        },
+      },
+      {
+        component3: {
+          type: 'fullspan-text',
+          heading: '',
+          subHeading: '',
+          mainContent: `<h3>Choose a Partner</h3>
+        <p>Finally, a critical step in preparing for predictive maintenance implementation is choosing the right IoT partner to have by your side throughout the process. Once you&rsquo;ve cultivated executive support for predictive maintenance across the organization, identified the machine condition for prediction, and secured enterprise-wide buy-in, partner with experts that have a background in implementing IoT for predictive maintenance. </p>
+        <p>Service organizations should look for IoT partners that can provide the support structure needed for predictive maintenance implementation, offering experience with: </p>
+        <ul>
+            <li>Data selection</li>
+            <li>Model building</li>
+            <li>Analytics</li>
+            <li>Data collection and management strategy</li>
+            <li>Data architecture, design, and governance</li>
+            <li>Simulation expertise</li>
+            <li>Ecosystem availability</li>
+        </ul>
+        <h3>Build a Predictive Model</h3>
+        <p>Your partners in predictive maintenance can help you find the right technology to build a predictive model and get valuable insights to speed service and reduce downtime.</p>
+        <p><strong>Establish Industrial Connectivity</strong><br />
+        As a critical first step in building a predictive model, industrial connectivity enables enterprise-wide visibility and data comparison. One way to establish industrial connectivity is through PTC&rsquo;s <a href="~/link.aspx?_id=931E5AE1D6D34267BE309685D12FA527&amp;_z=z">ThingWorx Kepware Server</a>, which provides secure, standardized data connectivity across disparate equipment (both new and legacy), establishing a foundation on which to scale with IoT<sup>2</sup>.</p>
+        <p><strong>Get Actionable Insights from IoT Analytics</strong><br />
+        PTC&rsquo;s <a href="~/link.aspx?_id=C8B5851AA3564A55899937AE7D929360&amp;_z=z">ThingWorx IoT platform</a>&nbsp;automates analytics and AI so organizations can access actionable IoT insights quickly and easily. These insights are delivered through ThingWorx capabilities including machine learning, which enables your team to predict based on what they learn from IoT data&mdash;without involving complex math or data scientists<sup>3</sup>.</p>
+        <br class="t-last-br" />
+        <sup>2</sup><a href="~/link.aspx?_id=931E5AE1D6D34267BE309685D12FA527&amp;_z=z">ThingWorx Kepware Server</a>
+        <sup>3</sup><a href="~/link.aspx?_id=C8B5851AA3564A55899937AE7D929360&amp;_z=z">ThingWorx IoT platform</a><br class="t-last-br" />`,
+          mainContentMultiLine: 'mainContent MultiLine to predict and resolve equipment issues before they result in costly downtime—but the perceived mystery behind data science and AI can be daunting enough to deter service organizations from pursuing a pr',
+          mainContentChart: 'eee',
+          mainContentChartHeight: 'sfsf',
+          isCenterText: false,
+          isStyledHeading: false,
+        },
+      },
+      {
+        component32: {
+          type: 'fullspan-text',
+          heading: '',
+          subHeading: '',
+          mainContent: `<p><strong>Predictive Maintenance in Action at Howden</strong></p>
+        <p>For Howden, a global engineering leader, predictive maintenance helps reduce costly unplanned downtime, optimize performance and energy efficiency, and deliver valuable domain knowledge about machines to its customers.</p>
+        <p>Howden partnered with PTC and selected the ThingWorx platform for predictive analytics. The partnership powers Howden&rsquo;s Data Driven Advantage (DDA) program, which offers its customers actionable data insights to &ldquo;avoid costly outages by detecting early warning signs,&rdquo; improving uptime<sup>4</sup>.  </p>
+        <p><a href="~/link.aspx?_id=333F47DC33954CB7B05001C6709432EC&amp;_z=z">Watch Howden&rsquo;s Full Predictive Maintenance Story</a></p>
+        <p><strong>Predictive Maintenance in Action at Parata</strong></p>
+        <p>For Parata Systems, a leading pharmacy automation company, ThingWorx replaced an IoT platform that lacked capabilities in visibility, reporting, and analytics. With goals to improve its customer experience in a scalable way, Parata started with remote condition monitoring and later built a service optimization solution. Now, ThingWorx enables proactive alerts and machine learning for improvements across service efficiency, resource utilization, parts consumption, and service profitability<sup>5</sup>.</p>
+        <p><a href="~/link.aspx?_id=13B6392FAD9146DCA33C34948C228EA9&amp;_z=z">Watch Parata&rsquo;s Full Predictive Maintenance Story</a></p>
+        <h3>Scale Your Predictive Maintenance Strategy</h3>
+        <p>With a dedicated IoT partnership and a predictive model in place, you can focus on expanding your predictive maintenance strategy at scale by:  </p>
+        <ol>
+            <li>Monitoring the efficacy of your predictive model over time</li>
+            <li>Gathering data and updating your predictive model</li>
+        </ol>
+        <br class="t-last-br" />
+        <p>
+        <sup>4</sup> <a href="~/link.aspx?_id=333F47DC33954CB7B05001C6709432EC&amp;_z=z">Predictive Analytics Delivering Real Value&mdash;a Practitioner&rsquo;s Perspective</a>&nbsp;webcast replay<br />
+        <sup>5 </sup><a href="~/link.aspx?_id=13B6392FAD9146DCA33C34948C228EA9&amp;_z=z">Proving the Value of Industrial IoT</a> webcast replay </p>
+        <br class="t-last-br" />`,
+          mainContentMultiLine: '',
+          mainContentChart: '',
+          mainContentChartHeight: '',
+          isCenterText: false,
+          isStyledHeading: false,
+        },
+      },
+      {
+        component32: {
+          type: 'fullspan-text',
+          heading: 'Remote Condition Monitoring: Solving Problems Before They Happen',
+          subHeading: '',
+          mainContent: `<h3>What It Looks Like</h3>
+        <p>Machines that seamlessly send real-time performance data allow service
+        professionals to assess, analyze, and act on issues before they become
+        problems. With a centralized remote condition monitoring platform, service
+        teams can easily leverage the sensor data and diagnostics they need to
+        become more proactive and less reactive. Data insights from remote condition
+        monitoring better enable technicians to understand and monitor usage,
+        performance, target parameters, productivity, and more. These patterns
+        enable technicians to detect faults and prevent downtime before it occurs&mdash;
+        and often before the customer is aware of any issue.</p>
+        <h3>Real-World Results</h3>
+        <p>With IoT remote data monitoring through ThingWorx, <a href="~/link.aspx?_id=70971B9D25B14D02BFD1A75F24F63292&amp;_z=z">Flowserve </a>avoided a
+        costly cavitation problem in a customer&rsquo;s running pump ($1.6 million or more
+        if not solved within 30 minutes; $16 million or more if not solved within 45-
+        60 minutes). Now, with their IoT solution in place, Flowserve decreases costs,
+        limits emergency work orders, improves profit, and enhances safety. Most
+        importantly, they exceed customer expectations with improved equipment
+        availability and efficiency.</p>
+        <p>IoT monitoring helped Flowserve prevent a $16 million
+        cavitation problem&mdash;before it impacted the customer.</p>`,
+          mainContentMultiLine: '',
+          mainContentChart: '',
+          mainContentChartHeight: '',
+          isCenterText: false,
+          isStyledHeading: false,
+        },
+        component1: {
+          type: 'two-column-with-text-media',
+          heading: '',
+          subHeading: '',
+          leftColumnContent: `<h3 class="wp-h3">
+        <img alt="Flowserve" src="https://www.ptc.com/-/media/CDD4A14F36164A0B8285B3B95EE52996.ashx" /></h3>
+        <br />`,
+          rightColumnContent: `<p><strong>“In Flowserve, we truly had an a-ha moment when we saw
+        some of the first information come back from the field in the
+        IoT platform...That was the moment where we thought, ‘Oh my
+        gosh. We’ve got something incredible here.'"</strong></p>
+        – Aric Zurek, Vice President, Marketing and Sales, Flowserve`,
+        },
+      },
+    ];
+    this.topBackgroundImage = undefined;
+    this.topBackgroundImageAlt = undefined;
+    this.itemsPerPage = 5;
+    this.currentPage = 1;
+    this.totalPages = undefined;
+    this.isMobile = undefined;
+  }
+  itemsChanged() {
+    this.calculateTotalPages();
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth < 768;
+  }
+  componentWillLoad() {
+    this.isMobile = window.innerWidth < 768;
+    this.calculateTotalPages();
+  }
+  calculateTotalPages() {
+    console.log(this.items.length);
+    this.totalPages = Math.ceil(this.items.length / this.itemsPerPage);
+  }
+  handlePageChange(newPage) {
+    if (newPage > 0 && newPage <= this.totalPages) {
+      this.currentPage = newPage;
+    }
+  }
+  handleFirstPage() {
+    this.handlePageChange(1);
+  }
+  handleLastPage() {
+    this.handlePageChange(this.totalPages);
+  }
+  handlePrevPage() {
+    this.handlePageChange(this.currentPage - 1);
+  }
+  handleNextPage() {
+    this.handlePageChange(this.currentPage + 1);
+  }
+  renderPaginationButtons() {
+    const paginationButtons = [];
+    const visiblePages = this.isMobile ? 2 : 3;
+    const totalPages = this.totalPages;
+    if (totalPages <= visiblePages) {
+      // If total pages are less than or equal to visible pages, show all pages
+      for (let i = 1; i <= totalPages; i++) {
+        paginationButtons.push(h("button", { class: { active: i === this.currentPage }, onClick: () => this.handlePageChange(i) }, i));
+      }
+    }
+    else {
+      // If total pages are greater than visible pages, show only 4 pages with ellipsis
+      const startPage = Math.max(1, this.currentPage - Math.floor(visiblePages / 2));
+      const endPage = Math.min(totalPages, startPage + visiblePages - 1);
+      if (startPage > 1) {
+        // Show "First" button if startPage is not the first page
+        paginationButtons.push(h("button", { onClick: () => this.handleFirstPage() }, "1"));
+        // Show ellipsis (...) before the first visible page
+        paginationButtons.push(h("span", null, "..."));
+      }
+      for (let i = startPage; i <= endPage; i++) {
+        paginationButtons.push(h("button", { class: { active: i === this.currentPage }, onClick: () => this.handlePageChange(i) }, i));
+      }
+      if (endPage < totalPages) {
+        // Show ellipsis (...) after the last visible page
+        paginationButtons.push(h("span", null, "..."));
+        // Show "Last" button if endPage is not the last page
+        paginationButtons.push(h("button", { onClick: () => this.handleLastPage() }, totalPages));
+      }
+    }
+    return paginationButtons;
+  }
+  renderContent(item, index) {
+    const components = Object.values(item);
+    return (h("div", { class: "content-wrapper", key: index }, components.map((comp, i) => (h("div", { key: i }, (comp.heading && comp.heading.trim() !== '') ? (h("ptc-title", { type: "h1", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-3" }, comp.heading, h("ptc-spacer", { size: "large" }))) : "", (comp.subHeading && comp.subHeading.trim() !== '') ? (h("div", { class: "sub-heading rich-content-text-editor", innerHTML: comp.subHeading })) : '', comp.type === 'two-column-with-text-media' && this.renderTwoColumnText(comp, i), comp.type === 'fullspan-media' && this.renderfullspanMedia(comp, i), comp.type === 'fullspan-text' && this.renderFullspanText(comp, i))))));
+  }
+  renderTwoColumnText(comp, index) {
+    return (h("div", null, comp.leftColumnContent && (h("div", { class: "is-grid has-col-gap-xl has-row-gap-sm wp-component", key: index }, h("div", { class: "is-col-6-md" }, h("div", { class: "left-content", innerHTML: comp.leftColumnContent })), h("div", { class: "is-col-6-md" }, h("div", { class: "right-content", innerHTML: comp.rightColumnContent }))))));
+  }
+  renderfullspanMedia(comp, index) {
+    return (h("div", { class: "wp-component wp-media", key: index }, comp.mainImage && (h("ptc-picture", { alt: comp.mainImageAlt, "display-image": "inline-block", "image-alignment": "center", "image-position": "relative", "object-fit": "cover", src: comp.mainImage })), comp.mainImageDescription && h("div", { class: "image-description", innerHTML: comp.mainImageDescription })));
+  }
+  renderFullspanText(comp, index) {
+    const classes = {
+      'wp-component': true,
+      'wp-fullspan-text': true,
+      'text-center': comp.isCenterText,
+    };
+    return (h("div", { class: classes, key: index }, comp.mainContent && h("div", { class: "", innerHTML: comp.mainContent }), comp.mainContentMultiLine && h("div", { class: "", innerHTML: comp.mainContentMultiLine }), comp.mainContentChart && (h("div", { class: "" }, h("ptc-spacer", { size: "large" }), h("object", { id: "", type: "text/html", width: "100%", height: comp.mainContentChartHeight, "data-dw-widget": "Edge", data: comp.mainContentChart }), h("ptc-spacer", { size: "large" })))));
+  }
+  render() {
+    const startIndex = (this.currentPage - 1) * this.itemsPerPage;
+    const endIndex = startIndex + this.itemsPerPage;
+    const currentItems = this.items.slice(startIndex, endIndex);
+    return (h(Host, null, h("div", { class: "hero-image" }, h("ptc-img", { "image-type": "smart-bg", "img-url": this.topBackgroundImage, "load-mode": "lazy-bg", styles: "" })), h("div", { class: "ptc-container " }, h("div", { class: "content-container" }, h("div", { class: "pagination-wrap" }, h("div", { class: "pagination" }, h("button", { onClick: () => this.handlePrevPage(), disabled: this.currentPage === 1 }, h("svg", { preserveAspectRatio: "xMidYMid meet", focusable: "false", viewBox: "0 0 18 18" }, h("g", { id: "icon_chevron_left_mini", viewBox: "0 0 18 18" }, h("g", { class: "icon_chevron_left_mini" }, h("path", { d: "M12 12.833L8.304 9 12 5.167 10.821 4 6 9l4.821 5L12 12.833z", class: "icon_chevron_left" }))))), this.renderPaginationButtons(), h("button", { onClick: () => this.handleNextPage(), disabled: this.currentPage === this.totalPages }, h("svg", { preserveAspectRatio: "xMidYMid meet", focusable: "false", viewBox: "0 0 18 18" }, h("g", { id: "icon_chevron_right_mini", viewBox: "0 0 18 18" }, h("g", { class: "icon_chevron_right_mini" }, h("path", { d: "M6 5.167L9.696 9 6 12.833 7.179 14 12 9 7.179 4 6 5.167z", class: "icon_chevron_right" })))))), h("a", { class: "dl-btn" }, h("span", { class: "dl-text" }, "Download"), h("img", { src: "https://www.ptc.com/dist/ptc/images/download-arrow.svg", alt: "Down Arrow" }))), h("div", null, currentItems.map((item, index) => this.renderContent(item, index)))))));
+  }
+  static get is() { return "ptc-white-paper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-white-paper.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-white-paper.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "any[]",
+          "resolved": "any[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[\r\n    {\r\n      component1: {\r\n        type: 'two-column-with-text-media',\r\n        heading: 'Why Now Is the Time to Use Advanced Technologies to Remotely Connect Your Medical Devices',\r\n        subHeading: 'Subheading text',\r\n        leftColumnContent: `There is growing interest in using the Internet of\r\n          Things (IoT) in medical devices. The data gathered\r\n          with IoT-enabled medical devices&mdash;the so-called\r\n          Internet of Medical Things (IoMT) devices&mdash;can be\r\n          used to remotely monitor and fix devices. The use\r\n          of IoT brings numerous benefits. Medical device\r\n          manufacturers can incorporate data collected from\r\n          their fleet of products in the field into product\r\n          design considerations. They can also leverage the\r\n          data to offer innovative services that differentiate\r\n          them from the competition.<br />\r\n          <br />\r\n          To get a better understanding of how advanced\r\n          technologies like IoT are being used to connect\r\n          medical devices remotely, we recently sat\r\n          down with Rene Zoelfl, Business Development\r\n          Director, PTC.<br />\r\n          <br />\r\n          We explored the role of IoT in medical devices\r\n          for remote management, how the technology is\r\n          being used, how the technology can support\r\n          new business models, and then covered some\r\n          real-world examples of the IoMT in action.<br />\r\n          <br />\r\n          <img alt=\"zoelfl1\" src=\"https://www.ptc.com/-/media/99F1C78BD774420AB51AA313C2D560D9.ashx\" /><br />\r\n          <strong>RTInsights:</strong> How can manufacturers, healthcare\r\n          facilities, and patients best benefit from remote\r\n          monitoring?<br />\r\n          <br />\r\n          <strong>Zoelfl:</strong> I would say remote monitoring gives two\r\n          main benefits. One is remote monitoring lets\r\n          device manufacturers optimize their processes,\r\n          and the other benefit is that they can optimize the\r\n          relationship with their customers, clients, and\r\n          patients. These things can help transform the way\r\n          they are doing business.<br />\r\n          <br />`,\r\n        rightColumnContent: `What are the key advanced technologies that are\r\n          enabling innovations in the design and use of\r\n          remote devices? On one hand, we have IoT technologies\r\n          that enable connectivity, advanced\r\n          analytics or artificial intelligence, and the ability to\r\n          automate decisions and processes to a higher level.\r\n          The other key element, the other key technology,\r\n          I'd like to highlight is augmented reality, which\r\n          gives us a different way, a different capability, to\r\n          interact with equipment in the context of its use\r\n          and in the context of the location where it is used.<br />\r\n          <br />\r\n          <img alt=\"zoelfl1b\" src=\"https://www.ptc.com/-/media/2161D33FD40E43D8BD453C4BC6C1CFC5.ashx\" /><br />\r\n          <strong>RTInsights:</strong> How can companies use these technologies\r\n          in the product life cycle?<br />\r\n          <br />\r\n          <strong>Zoelfl:</strong> There are multiple ways. Where to begin?\r\n          A manufacturer can use IoT technologies internally.\r\n          They can make sure that when teams are working\r\n          together on the design of new products, they can\r\n          more easily communicate and get access to the\r\n          generated data. Then they also could have the\r\n          same capabilities or the same technologies to use\r\n          when it comes to handing over that information\r\n          into manufacturing.<br />\r\n          <br />\r\n          For instance, when a manufacturer thinks about\r\n          non-conformances that might occur in the manufacturing\r\n          process, because of maybe some difficult\r\n          designs, or maybe some materials that they have\r\n          selected, they can feed that information back into\r\n          the development and engineering organizations.\r\n          They can react much faster before the product\r\n          might have left the company and not when it is at\r\n          the patient or the caregiving facility.`,\r\n      },\r\n    },\r\n\r\n    {\r\n      component2: {\r\n        type: 'fullspan-media',\r\n        heading: '',\r\n        subHeading: `<h3>Case Study: Digital Transformation for Service Optimization</h3>\r\n        <p>A major manufacturer of power equipment fueled its service\r\n        network by streamlining dealership networks and the end\r\n        users they service.</p>\r\n        <ul>\r\n        <li>The OEM embedded Industrial Internet of Things (IIoT)\r\n        technologies into its products to gain visibility, which derivatively\r\n        impacted critical service and operational KPIs for its dealership\r\n        and end user. This also offloaded service-related costs (warranty,\r\n        total cost of ownership, truck rolls etc.) from its outstanding\r\n        liabilities.</li>\r\n        <li>The dealership improved the customer relationship by increasing\r\n        asset uptime and optimizing service delivery costs through\r\n        equipping technicians with critical repair insights for severity,\r\n        proximity, skillset, and remediating actions required.</li>\r\n        <li>The end user operating a mine in a sub-zero environment\r\n        improved the reliability, availability, and uptime of mission-critical\r\n        assets.</li>\r\n        </ul>\r\n        <p>While the service network can take many different complex\r\n        forms, this example illustrates the mutually beneficial impact\r\n        and largely untapped potential of gaining visibility across the\r\n        service lifecycle.</p>`,\r\n        mainImage: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c01e7beaaccc4ff9a33bd1b07c04a50a',\r\n        mainImageAlt: 'reducing-service-costs-1',\r\n        mainImageDescription: 'Some image description',\r\n      },\r\n    },\r\n\r\n    {\r\n      component3: {\r\n        type: 'fullspan-text',\r\n        heading: '',\r\n        subHeading: '',\r\n        mainContent: `<h3>Choose a Partner</h3>\r\n        <p>Finally, a critical step in preparing for predictive maintenance implementation is choosing the right IoT partner to have by your side throughout the process. Once you&rsquo;ve cultivated executive support for predictive maintenance across the organization, identified the machine condition for prediction, and secured enterprise-wide buy-in, partner with experts that have a background in implementing IoT for predictive maintenance. </p>\r\n        <p>Service organizations should look for IoT partners that can provide the support structure needed for predictive maintenance implementation, offering experience with: </p>\r\n        <ul>\r\n            <li>Data selection</li>\r\n            <li>Model building</li>\r\n            <li>Analytics</li>\r\n            <li>Data collection and management strategy</li>\r\n            <li>Data architecture, design, and governance</li>\r\n            <li>Simulation expertise</li>\r\n            <li>Ecosystem availability</li>\r\n        </ul>\r\n        <h3>Build a Predictive Model</h3>\r\n        <p>Your partners in predictive maintenance can help you find the right technology to build a predictive model and get valuable insights to speed service and reduce downtime.</p>\r\n        <p><strong>Establish Industrial Connectivity</strong><br />\r\n        As a critical first step in building a predictive model, industrial connectivity enables enterprise-wide visibility and data comparison. One way to establish industrial connectivity is through PTC&rsquo;s <a href=\"~/link.aspx?_id=931E5AE1D6D34267BE309685D12FA527&amp;_z=z\">ThingWorx Kepware Server</a>, which provides secure, standardized data connectivity across disparate equipment (both new and legacy), establishing a foundation on which to scale with IoT<sup>2</sup>.</p>\r\n        <p><strong>Get Actionable Insights from IoT Analytics</strong><br />\r\n        PTC&rsquo;s <a href=\"~/link.aspx?_id=C8B5851AA3564A55899937AE7D929360&amp;_z=z\">ThingWorx IoT platform</a>&nbsp;automates analytics and AI so organizations can access actionable IoT insights quickly and easily. These insights are delivered through ThingWorx capabilities including machine learning, which enables your team to predict based on what they learn from IoT data&mdash;without involving complex math or data scientists<sup>3</sup>.</p>\r\n        <br class=\"t-last-br\" />\r\n        <sup>2</sup><a href=\"~/link.aspx?_id=931E5AE1D6D34267BE309685D12FA527&amp;_z=z\">ThingWorx Kepware Server</a>\r\n        <sup>3</sup><a href=\"~/link.aspx?_id=C8B5851AA3564A55899937AE7D929360&amp;_z=z\">ThingWorx IoT platform</a><br class=\"t-last-br\" />`,\r\n        mainContentMultiLine:\r\n          'mainContent MultiLine to predict and resolve equipment issues before they result in costly downtime\u2014but the perceived mystery behind data science and AI can be daunting enough to deter service organizations from pursuing a pr',\r\n        mainContentChart: 'eee',\r\n        mainContentChartHeight: 'sfsf',\r\n        isCenterText: false,\r\n        isStyledHeading: false,\r\n      },\r\n    },\r\n    {\r\n      component32: {\r\n        type: 'fullspan-text',\r\n        heading: '',\r\n        subHeading: '',\r\n        mainContent: `<p><strong>Predictive Maintenance in Action at Howden</strong></p>\r\n        <p>For Howden, a global engineering leader, predictive maintenance helps reduce costly unplanned downtime, optimize performance and energy efficiency, and deliver valuable domain knowledge about machines to its customers.</p>\r\n        <p>Howden partnered with PTC and selected the ThingWorx platform for predictive analytics. The partnership powers Howden&rsquo;s Data Driven Advantage (DDA) program, which offers its customers actionable data insights to &ldquo;avoid costly outages by detecting early warning signs,&rdquo; improving uptime<sup>4</sup>.  </p>\r\n        <p><a href=\"~/link.aspx?_id=333F47DC33954CB7B05001C6709432EC&amp;_z=z\">Watch Howden&rsquo;s Full Predictive Maintenance Story</a></p>\r\n        <p><strong>Predictive Maintenance in Action at Parata</strong></p>\r\n        <p>For Parata Systems, a leading pharmacy automation company, ThingWorx replaced an IoT platform that lacked capabilities in visibility, reporting, and analytics. With goals to improve its customer experience in a scalable way, Parata started with remote condition monitoring and later built a service optimization solution. Now, ThingWorx enables proactive alerts and machine learning for improvements across service efficiency, resource utilization, parts consumption, and service profitability<sup>5</sup>.</p>\r\n        <p><a href=\"~/link.aspx?_id=13B6392FAD9146DCA33C34948C228EA9&amp;_z=z\">Watch Parata&rsquo;s Full Predictive Maintenance Story</a></p>\r\n        <h3>Scale Your Predictive Maintenance Strategy</h3>\r\n        <p>With a dedicated IoT partnership and a predictive model in place, you can focus on expanding your predictive maintenance strategy at scale by:  </p>\r\n        <ol>\r\n            <li>Monitoring the efficacy of your predictive model over time</li>\r\n            <li>Gathering data and updating your predictive model</li>\r\n        </ol>\r\n        <br class=\"t-last-br\" />\r\n        <p>\r\n        <sup>4</sup> <a href=\"~/link.aspx?_id=333F47DC33954CB7B05001C6709432EC&amp;_z=z\">Predictive Analytics Delivering Real Value&mdash;a Practitioner&rsquo;s Perspective</a>&nbsp;webcast replay<br />\r\n        <sup>5 </sup><a href=\"~/link.aspx?_id=13B6392FAD9146DCA33C34948C228EA9&amp;_z=z\">Proving the Value of Industrial IoT</a> webcast replay </p>\r\n        <br class=\"t-last-br\" />`,\r\n        mainContentMultiLine: '',\r\n        mainContentChart: '',\r\n        mainContentChartHeight: '',\r\n        isCenterText: false,\r\n        isStyledHeading: false,\r\n      },\r\n    },\r\n    {\r\n      component32: {\r\n        type: 'fullspan-text',\r\n        heading: 'Remote Condition Monitoring: Solving Problems Before They Happen',\r\n        subHeading: '',\r\n        mainContent: `<h3>What It Looks Like</h3>\r\n        <p>Machines that seamlessly send real-time performance data allow service\r\n        professionals to assess, analyze, and act on issues before they become\r\n        problems. With a centralized remote condition monitoring platform, service\r\n        teams can easily leverage the sensor data and diagnostics they need to\r\n        become more proactive and less reactive. Data insights from remote condition\r\n        monitoring better enable technicians to understand and monitor usage,\r\n        performance, target parameters, productivity, and more. These patterns\r\n        enable technicians to detect faults and prevent downtime before it occurs&mdash;\r\n        and often before the customer is aware of any issue.</p>\r\n        <h3>Real-World Results</h3>\r\n        <p>With IoT remote data monitoring through ThingWorx, <a href=\"~/link.aspx?_id=70971B9D25B14D02BFD1A75F24F63292&amp;_z=z\">Flowserve </a>avoided a\r\n        costly cavitation problem in a customer&rsquo;s running pump ($1.6 million or more\r\n        if not solved within 30 minutes; $16 million or more if not solved within 45-\r\n        60 minutes). Now, with their IoT solution in place, Flowserve decreases costs,\r\n        limits emergency work orders, improves profit, and enhances safety. Most\r\n        importantly, they exceed customer expectations with improved equipment\r\n        availability and efficiency.</p>\r\n        <p>IoT monitoring helped Flowserve prevent a $16 million\r\n        cavitation problem&mdash;before it impacted the customer.</p>`,\r\n        mainContentMultiLine: '',\r\n        mainContentChart: '',\r\n        mainContentChartHeight: '',\r\n        isCenterText: false,\r\n        isStyledHeading: false,\r\n      },\r\n      component1: {\r\n        type: 'two-column-with-text-media',\r\n        heading: '',\r\n        subHeading: '',\r\n        leftColumnContent: `<h3 class=\"wp-h3\">\r\n        <img alt=\"Flowserve\" src=\"https://www.ptc.com/-/media/CDD4A14F36164A0B8285B3B95EE52996.ashx\" /></h3>\r\n        <br />`,\r\n        rightColumnContent: `<p><strong>\u201CIn Flowserve, we truly had an a-ha moment when we saw\r\n        some of the first information come back from the field in the\r\n        IoT platform...That was the moment where we thought, \u2018Oh my\r\n        gosh. We\u2019ve got something incredible here.'\"</strong></p>\r\n        \u2013 Aric Zurek, Vice President, Marketing and Sales, Flowserve`,\r\n      },\r\n    },\r\n  ]"
+      },
+      "topBackgroundImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "top-background-image",
+        "reflect": false
+      },
+      "topBackgroundImageAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "top-background-image-alt",
+        "reflect": false
+      },
+      "itemsPerPage": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "items-per-page",
+        "reflect": false,
+        "defaultValue": "5"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "currentPage": {},
+      "totalPages": {},
+      "isMobile": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "items",
+        "methodName": "itemsChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}