@ptcwebops/ptcw-design 6.4.36-beta → 6.5.0-upgrade

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

@@ -1,261 +0,0 @@
-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() {
-    this.totalPages = Math.ceil(JSON.parse(this.items).length / this.itemsPerPage);
-  }
-  handlePageChange(newPage) {
-    if (newPage > 0 && newPage <= this.totalPages) {
-      this.currentPage = newPage;
-      window.scrollTo(0, 0);
-      if (newPage == 2) {
-        let modalForm = document.querySelector("#modal-form");
-        modalForm.focusBackElement =
-          this.el.shadowRoot.querySelectorAll(".pagination button")[2];
-        if (modalForm) {
-          modalForm.setAttribute("show", "true");
-          setTimeout(() => {
-            window.scrollTo(0, 0);
-          }, 200);
-        }
-      }
-    }
-  }
-  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: "mf-listen " + { active: i === this.currentPage }, tabindex: 0, onKeyPress: () => this.handlePageChange(i), 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", { class: "mf-listen", tabindex: 0, onKeyPress: () => this.handleFirstPage(), 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: "mf-listen " + { active: i === this.currentPage }, tabindex: 0, onKeyPress: () => this.handlePageChange(i), 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", { class: "mf-listen", tabindex: 0, onKeyPress: () => this.handleLastPage(), 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) => {
-      var _a, _b;
-      let heading = this.el.querySelector(`[slot="heading-page${this.currentPage}-comp${i + 1}"]`);
-      let subHeading = this.el.querySelector(`[slot="subheading-page${this.currentPage}-comp${i + 1}"]`);
-      return (h("div", { key: i }, heading &&
-        heading.innerText &&
-        ((_a = heading.innerText) === null || _a === void 0 ? void 0 : _a.trim()) !== "" ? (this.currentPage == 1 ? (h("ptc-title", { type: "h1", upperline: comp.isStyledHeading
-          ? "dotted"
-          : "no-upperline", "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: `heading-page${this.currentPage}-comp${i + 1}` }), h("ptc-spacer", { size: "large" }))) : (h("ptc-title", { type: "h2", upperline: comp.isStyledHeading
-          ? "dotted"
-          : "no-upperline", "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: `heading-page${this.currentPage}-comp${i + 1}` }), h("ptc-spacer", { size: "large" })))) : (""), subHeading &&
-        subHeading.innerText &&
-        ((_b = subHeading.innerText) === null || _b === void 0 ? void 0 : _b.trim()) !== "" ? (h("div", { class: "sub-heading rich-content-text-editor" }, h("slot", { name: `subheading-page${this.currentPage}-comp${i + 1}` }))) : (""), 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(_, index) {
-    const pageNumber = this.currentPage;
-    const componentNumber = index + 1;
-    return (h("div", null, 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" }, h("slot", { name: `left-column-content-page${pageNumber}-comp${componentNumber}` }))), h("div", { class: "is-col-6-md" }, h("div", { class: "right-content" }, h("slot", { name: `right-column-content-page${pageNumber}-comp${componentNumber}` }))))));
-  }
-  renderfullspanMedia(comp, index) {
-    const pageNumber = this.currentPage;
-    const componentNumber = index + 1;
-    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 })), h("div", { class: "image-description" }, h("slot", { name: `main-image-description-page${pageNumber}-comp${componentNumber}` }))));
-  }
-  renderFullspanText(comp, index) {
-    const pageNumber = this.currentPage;
-    const componentNumber = index + 1;
-    const classes = {
-      "wp-component": true,
-      "wp-fullspan-text": true,
-      "text-center": comp.isCenterText,
-    };
-    return (h("div", { class: classes, key: index }, h("div", { class: "" }, h("slot", { name: `main-content-page${pageNumber}-comp${componentNumber}` })), h("div", { class: "" }, h("slot", { name: `main-content-multi-line-page${pageNumber}-comp${componentNumber}` })), 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, tabindex: "-1" }), 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", { class: "mf-listen", id: "prevPageBtnID", onClick: () => this.handlePrevPage(), onKeyPress: () => this.handlePrevPage(), tabIndex: 0, 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", { class: "mf-listen", id: "nextPageBtnID", onClick: () => this.handleNextPage(), onKeyPress: () => this.handleNextPage(), tabIndex: 0, 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("div", { class: "mf-listen dl-btn-wrapper", id: "downloadBtnID" }, h("a", { class: "dl-btn", tabindex: 0, onKeyPress: (e) => this.downloadCtaClicked.emit(e), onClick: (e) => {
-        this.downloadCtaClicked.emit(e);
-      } }, 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 events() {
-    return [{
-        "method": "downloadCtaClicked",
-        "name": "downloadCtaClicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "items",
-        "methodName": "itemsChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}

package/dist/collection/components/subnav/ptc-nav-link/ptc-nav-link.css

@@ -1,172 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-ul,
-li,
-ptc-subnav,
-ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
-  word-break: break-word;
-  hyphens: manual;
-  -webkit-hyphens: manual;
-  -moz-hyphens: manual;
-  -ms-hyphens: manual;
-}
-@supports (hyphenate-limit-chars: 12 3 3) {
-  h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-ul,
-li,
-ptc-subnav,
-ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    /* For Safari */
-    -webkit-hyphenate-limit-after: 3;
-    /* For Safari */
-    hyphenate-limit-chars: 12 3 3;
-    hyphenate-limit-lines: 2;
-    hyphenate-limit-last: always;
-    hyphenate-limit-zone: 6%;
-    -webkit-hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-    -webkit-hyphenate-limit-chars: 12 3 3;
-    -webkit-hyphenate-limit-lines: 2;
-    -moz-hyphens: auto;
-    -moz-hyphenate-limit-chars: 12 3 3;
-    -moz-hyphenate-limit-lines: 2;
-    -ms-hyphens: auto;
-    -ms-hyphenate-limit-chars: 12 3 3;
-    -ms-hyphenate-limit-lines: 2;
-  }
-}
-
-:host {
-  display: block;
-  position: relative;
-}
-@media only screen and (min-width: 1200px) {
-  :host {
-    display: inline-block;
-  }
-}
-:host::before, :host::after {
-  content: " ";
-  width: 1600px;
-  height: 1px;
-  background-color: var(--color-gray-08);
-  position: absolute;
-  right: 0;
-  bottom: 0;
-}
-@media only screen and (min-width: 1200px) {
-  :host::before, :host::after {
-    display: none;
-  }
-}
-:host::after {
-  left: 0;
-  right: auto;
-}
-:host a {
-  color: var(--color-gray-03);
-  text-decoration: none;
-  display: block;
-  border-bottom: 2px solid transparent;
-  margin-left: 34%;
-  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-03);
-  font-size: var(--ptc-font-size-xx-small);
-  line-height: var(--ptc-line-height-denser);
-  font-weight: var(--ptc-font-weight-bold);
-}
-@media only screen and (min-width: 480px) {
-  :host a {
-    margin-left: 38%;
-  }
-}
-@media only screen and (min-width: 768px) {
-  :host a {
-    margin-left: 42%;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  :host a {
-    padding: 14px var(--ptc-element-spacing-03) 22px;
-    margin-top: 6px;
-    border-top: 2px solid transparent;
-    margin-left: 0;
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    position: relative;
-  }
-  :host a::after {
-    content: "";
-    display: block;
-    border-bottom: 2px solid transparent;
-    margin: auto;
-    position: absolute;
-    width: calc(100% - 20px);
-    left: 0;
-    right: 0;
-    bottom: 20px;
-  }
-}
-:host a svg {
-  width: 1rem;
-  height: 0.875rem;
-  display: inline-block;
-  background-size: cover;
-  transition: margin-left 250ms ease-out;
-  vertical-align: middle;
-  margin-left: 4px;
-}
-:host a:hover,
-:host a:focus {
-  color: var(--color-white);
-}
-@media only screen and (min-width: 1200px) {
-  :host a:hover::after,
-:host a:focus::after {
-    border-color: var(--color-white);
-  }
-}
-:host a:hover svg path,
-:host a:focus svg path {
-  fill: var(--color-white);
-}
-:host a:focus-visible {
-  border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
-  outline: 5px solid var(--keyboard-nav-outline);
-  padding: 14px 10px 16px;
-}
-@media only screen and (min-width: 1200px) {
-  :host a:focus-visible {
-    padding: 14px 10px 20px;
-  }
-}
-:host ::slotted(icon-asset) {
-  margin-top: 4px;
-  margin-right: 8px;
-}
-:host .tracker-div {
-  display: inline;
-}

package/dist/collection/components/subnav/ptc-nav-link/ptc-nav-link.js

@@ -1,149 +0,0 @@
-import { h, Host, } from "@stencil/core";
-export class PtcNavLink {
-  constructor() {
-    this.href = undefined;
-    this.isOutsideLink = false;
-    this.titleText = "";
-    this.trackerId = undefined;
-  }
-  handleClick(event) {
-    // Prevent the event from propagating to the underlying <a> element
-    event.stopPropagation();
-    // Check if the href starts with #
-    if (this.href && this.href.startsWith("#")) {
-      // Find the corresponding section
-      const section = document.querySelector(this.href);
-      section.scrollIntoView({
-        behavior: "smooth",
-      });
-      this.navLinkClicked.emit();
-    }
-  }
-  trimString(inputString, maxLength) {
-    if (inputString.length > maxLength) {
-      return inputString.slice(0, maxLength) + "...";
-    }
-    else {
-      return inputString;
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "tracker-div mf-listen" }, h("a", { id: this.trackerId, href: this.href, target: this.isOutsideLink ? "_blank" : "_self", title: this.titleText, onClick: (event) => {
-        this.handleClick(event);
-      } }, h("slot", null), !this.href.startsWith("#") && (h("svg", { class: "icon-arrow-right", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "10", viewBox: "0 0 14 10", fill: "none" }, h("path", { d: "M8.84921 0.77792L8.81313 3.41153L0.51545 3.55584L0.515449 6.5863L8.81313 6.44199L8.81313 9.40029L13.1424 5.07107L8.84921 0.77792Z", fill: "#AEB8BD" })))))));
-  }
-  static get is() { return "ptc-nav-link"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-nav-link.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-nav-link.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "href": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Link href\r\nSpecify Link Href,"
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "isOutsideLink": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "isOutsideLink = false"
-        },
-        "attribute": "is-outside-link",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "titleText": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Anchor link Title"
-        },
-        "attribute": "title-text",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "trackerId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Tracker Id"
-        },
-        "attribute": "tracker-id",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "navLinkClicked",
-        "name": "navLinkClicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Creating navLinkClicked to check if the link is clicked and toggle the subnav on mobile"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleClick",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }];
-  }
-}