@ptcwebops/ptcw-design 3.4.2 → 3.4.4

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

@@ -1,206 +1,213 @@
-import { Host, h } from '@stencil/core';
-export class PtcWhitePaper {
-  constructor() {
-    this.items = undefined;
-    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(JSON.parse(this.items).length);
-    this.totalPages = Math.ceil(JSON.parse(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.componentType === 'two-column-with-text-media' && this.renderTwoColumnText(comp, i), comp.componentType === 'fullspan-media' && this.renderfullspanMedia(comp, i), comp.componentType === '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 = JSON.parse(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": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "items",
-        "reflect": false
-      },
-      "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
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcWhitePaper {
+  constructor() {
+    this.items = undefined;
+    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(JSON.parse(this.items).length);
+    this.totalPages = Math.ceil(JSON.parse(this.items).length / this.itemsPerPage);
+  }
+  handlePageChange(newPage) {
+    if (newPage > 0 && newPage <= this.totalPages) {
+      this.currentPage = newPage;
+      if (newPage == 2) {
+        let modalForm = document.querySelector("#modal-form");
+        if (modalForm) {
+          modalForm.setAttribute("show", "true");
+          window.scrollTo(0, 0);
+        }
+      }
+    }
+  }
+  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.componentType === 'two-column-with-text-media' && this.renderTwoColumnText(comp, i), comp.componentType === 'fullspan-media' && this.renderfullspanMedia(comp, i), comp.componentType === '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 = JSON.parse(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": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "items",
+        "reflect": false
+      },
+      "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
+      }];
+  }
+}