@ptcwebops/ptcw-design 2.8.5 → 2.8.7

package/dist/collection/components/ptc-embedded-quiz/ptc-embedded-quiz.css

@@ -1,149 +1,150 @@
 :host {
   display: block;
 }
-@media only screen and (min-width: 360px) {
-  :host .quiz-slide-container {
-    position: relative;
-    width: 100%;
-    border: 1px solid var(--color-gray-12);
-    background-color: white;
-  }
-  :host .quiz-slide-container .quiz-slide-text-container {
-    max-width: calc(24 * var(--ptc-element-spacing-07));
-  }
-  :host .quiz-slide-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: url("https://www.ptc.com/-/media/Development/Embedded-Vuforia-Quiz/vuforia-background-guide-01.svg");
-    background-size: cover;
-    background-position: center;
-    opacity: 0.25;
-  }
-  :host .quiz-slide-initial {
-    padding: var(--ptc-element-spacing-08);
-    display: flex;
-    justify-content: center;
-  }
-  :host .quiz-slide-initial #initial-quiz-p {
-    padding: 0 0 calc(var(--ptc-element-spacing-08) + var(--ptc-element-spacing-04)) 0;
-  }
-  :host .quiz-slide-result .cta-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  :host .quiz-slide-result .cta-container ptc-button {
-    flex: 1 0 100%;
-    margin: 0 0 var(--ptc-element-spacing-05) 0;
-  }
-  :host .right-button-container {
-    display: flex;
-    justify-content: right;
-  }
-  :host .right-button-container .restart-quiz-button {
-    display: flex;
-    margin: var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) 0 0;
-    transition: var(--ptc-transition-slow);
-  }
-  :host .right-button-container .restart-quiz-button #restart-arrow {
-    display: flex;
-    align-items: center;
-  }
-  :host .right-button-container .restart-quiz-button #restart-arrow svg {
-    z-index: 2;
-    margin-right: var(--ptc-element-spacing-03);
-  }
-  :host .right-button-container .restart-quiz-button:hover {
-    cursor: pointer;
-  }
-  :host .right-button-container .restart-quiz-button:hover #restart-arrow svg {
-    transform: rotate(270deg);
-  }
-  :host .right-button-container .restart-quiz-button:hover ptc-para {
-    opacity: 0.7;
-  }
-  :host .center-button-container {
-    display: flex;
-    justify-content: center;
-  }
-  :host .previous-slide-button {
-    display: flex;
-    align-items: center;
-    margin: 0 0 var(--ptc-element-spacing-06) 0;
-    transition: var(--ptc-transition-slow);
-  }
-  :host .previous-slide-button icon-asset {
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    margin-right: var(--ptc-element-spacing-03);
-  }
-  :host .previous-slide-button:hover {
-    cursor: pointer;
-  }
-  :host .previous-slide-button:hover icon-asset svg {
-    transform: translateX(-8px);
-  }
-  :host .previous-slide-button:hover ptc-para {
-    opacity: 0.7;
-  }
-  :host .quiz-slide-dual-layout .image-container {
-    padding-top: var(--ptc-element-spacing-06);
-    display: flex;
-    justify-content: center;
-    height: calc(4 * var(--ptc-element-spacing-08));
-    width: 100%;
-  }
-  :host .quiz-slide-dual-layout .image-container img {
-    height: 100%;
-    width: 100%;
-  }
-  :host .quiz-slide-dual-layout .content-container {
-    margin: var(--ptc-element-spacing-06) var(--ptc-element-spacing-08) var(--ptc-element-spacing-08) var(--ptc-element-spacing-08);
-  }
-  :host .quiz-slide-dual-layout .content-container .options-container {
-    margin-top: var(--ptc-element-spacing-06);
-    padding-left: var(--ptc-element-spacing-05);
-    display: flex;
-    flex-wrap: wrap;
-    z-index: 2;
-  }
-  :host .quiz-slide-dual-layout .content-container .options-container .radio-input {
-    flex: 1 0 100%;
-    margin-bottom: var(--ptc-element-spacing-06);
-    display: flex;
-    align-items: start;
-    display: flex;
-    align-items: flex-start;
-  }
-  :host .quiz-slide-dual-layout .content-container .options-container .radio-input .radio {
-    width: 16px;
-    height: 16px;
-    border-radius: var(--ptc-border-radius-circle);
-    border: var(--color-gray-10) solid 1px;
-    z-index: 2;
-    padding: 2.5px;
-    box-sizing: border-box;
-    flex-shrink: 0;
-    margin-top: var(--ptc-element-spacing-01);
-  }
-  :host .quiz-slide-dual-layout .content-container .options-container .radio-input .radio.clicked {
-    border: var(--color-blue-08) solid 1px;
-    background: var(--color-blue-08);
-    background-clip: content-box, padding-box;
-  }
-  :host .quiz-slide-dual-layout .content-container .options-container .radio-input ptc-para {
-    padding: 0 var(--ptc-element-spacing-02) 0 var(--ptc-element-spacing-03);
-  }
-  :host .quiz-slide-dual-layout .content-container .options-container .radio-input:hover {
-    cursor: pointer;
-  }
-  :host .quiz-slide-dual-layout .content-container .options-container .radio-input:hover .radio {
-    box-shadow: var(--ptc-shadow-x-small);
-  }
+:host .quiz-slide-container {
+  position: relative;
+  width: 100%;
+  border: 1px solid var(--color-gray-12);
+  background-color: white;
+  z-index: 1;
+}
+:host .quiz-slide-container .quiz-slide-text-container {
+  max-width: calc(24 * var(--ptc-element-spacing-07));
+}
+:host .quiz-slide-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url("https://www.ptc.com/-/media/Development/Embedded-Vuforia-Quiz/vuforia-background-guide-01.svg");
+  background-size: cover;
+  background-position: center;
+  opacity: 0.2;
+  z-index: -1;
+}
+:host .quiz-slide-initial {
+  padding: var(--ptc-element-spacing-08);
+  display: flex;
+  justify-content: center;
+}
+:host .quiz-slide-initial #initial-quiz-p {
+  padding: 0 0 calc(var(--ptc-element-spacing-08) + var(--ptc-element-spacing-04)) 0;
+}
+:host .quiz-slide-result .cta-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+:host .quiz-slide-result .cta-container ptc-button {
+  flex: 1 0 100%;
+  margin: 0 0 var(--ptc-element-spacing-05) 0;
+}
+:host .right-button-container {
+  display: flex;
+  justify-content: right;
+}
+:host .right-button-container .restart-quiz-button {
+  display: flex;
+  margin: var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) 0 0;
+  transition: var(--ptc-transition-slow);
+}
+:host .right-button-container .restart-quiz-button #restart-arrow {
+  display: flex;
+  align-items: center;
+}
+:host .right-button-container .restart-quiz-button #restart-arrow svg {
+  z-index: 2;
+  margin-right: var(--ptc-element-spacing-03);
+}
+:host .right-button-container .restart-quiz-button:hover {
+  cursor: pointer;
+}
+:host .right-button-container .restart-quiz-button:hover #restart-arrow svg {
+  transform: rotate(270deg);
+}
+:host .right-button-container .restart-quiz-button:hover ptc-para {
+  opacity: 0.7;
+}
+:host .center-button-container {
+  display: flex;
+  justify-content: center;
+}
+:host .previous-slide-button {
+  display: flex;
+  align-items: center;
+  margin: 0 0 var(--ptc-element-spacing-06) 0;
+  transition: var(--ptc-transition-slow);
+}
+:host .previous-slide-button icon-asset {
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  margin-right: var(--ptc-element-spacing-03);
+}
+:host .previous-slide-button:hover {
+  cursor: pointer;
+}
+:host .previous-slide-button:hover icon-asset svg {
+  transform: translateX(-8px);
+}
+:host .previous-slide-button:hover ptc-para {
+  opacity: 0.7;
+}
+:host .quiz-slide-dual-layout .image-container {
+  padding-top: var(--ptc-element-spacing-06);
+  display: flex;
+  justify-content: center;
+  height: calc(4 * var(--ptc-element-spacing-08));
+  width: 100%;
+}
+:host .quiz-slide-dual-layout .image-container img {
+  height: 100%;
+  width: 100%;
+}
+:host .quiz-slide-dual-layout .content-container {
+  margin: var(--ptc-element-spacing-06) var(--ptc-element-spacing-08) var(--ptc-element-spacing-08) var(--ptc-element-spacing-08);
+}
+:host .quiz-slide-dual-layout .content-container .options-container {
+  margin-top: var(--ptc-element-spacing-06);
+  padding-left: var(--ptc-element-spacing-05);
+  display: flex;
+  flex-wrap: wrap;
+  z-index: 2;
+}
+:host .quiz-slide-dual-layout .content-container .options-container .radio-input {
+  flex: 1 0 100%;
+  margin-bottom: var(--ptc-element-spacing-06);
+  display: flex;
+  align-items: start;
+  display: flex;
+  align-items: flex-start;
+}
+:host .quiz-slide-dual-layout .content-container .options-container .radio-input .radio {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--ptc-border-radius-circle);
+  border: var(--color-gray-10) solid 1px;
+  z-index: 2;
+  padding: 3px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  margin-top: var(--ptc-element-spacing-01);
+  background-color: white;
+}
+:host .quiz-slide-dual-layout .content-container .options-container .radio-input .radio.clicked {
+  border: var(--color-blue-08) solid 1px;
+  background: var(--color-blue-08);
+  background-clip: content-box, padding-box;
+}
+:host .quiz-slide-dual-layout .content-container .options-container .radio-input ptc-para {
+  padding: 0 var(--ptc-element-spacing-02) 0 var(--ptc-element-spacing-03);
+}
+:host .quiz-slide-dual-layout .content-container .options-container .radio-input:hover {
+  cursor: pointer;
+}
+:host .quiz-slide-dual-layout .content-container .options-container .radio-input:hover .radio {
+  box-shadow: var(--ptc-shadow-x-small);
 }
 @media only screen and (min-width: 768px) {
   :host .quiz-slide-container {

package/dist/collection/components/ptc-pricing-packaging-table/ptc-pricing-packaging-table.css

@@ -103,7 +103,7 @@
   overflow-x: hidden;
   -ms-overflow-style: none;
   scrollbar-width: none;
-  box-shadow: var(--ptc-shadow-x-large);
+  box-shadow: 0 16px 16px -16px grey;
 }
 :host #table-header.sticky::-webkit-scrollbar {
   display: none;

package/dist/collection/components/ptc-pricing-packaging-table/ptc-pricing-packaging-table.js

@@ -125,26 +125,12 @@ export class PtcPricingPackagingTable {
         this.el.style.setProperty('--cell-width-md', `${this.cellWidthMD}px`);
       }
     };
-    this.expandFillerCell = () => {
-      let pricingTable = this.el.shadowRoot.querySelector("#pricing-table");
-      let desktopHeaderFirstCell = this.el.shadowRoot.querySelector(".desktop-header-first-cell");
-      let occupiedSpace;
-      if (this.isDesktopView) {
-        occupiedSpace = desktopHeaderFirstCell.getBoundingClientRect().width + (this.dataCols * (this.cellWidthMD + this.cellLeftRightPadding));
-      }
-      else {
-        occupiedSpace = this.dataCols * (this.cellWidthXXS + this.cellLeftRightPadding);
-      }
-      let fillerWidth = pricingTable.getBoundingClientRect().width - occupiedSpace;
-      this.el.style.setProperty('--filler-cell-width', `${fillerWidth - this.cellLeftRightPadding}px`);
-      this.showFillerCells = true;
-    };
     this.handleFillEmptySpace = () => {
       let pricingTable = this.el.shadowRoot.querySelector("#pricing-table");
-      let tableHeader = this.el.shadowRoot.querySelector("#table-header");
-      if (tableHeader.getBoundingClientRect().right < pricingTable.getBoundingClientRect().right) {
-        // this.expandTableCells();
-        this.expandFillerCell();
+      let tableHeaderPlaceholder = this.el.shadowRoot.querySelector("#table-header-placeholder");
+      if (tableHeaderPlaceholder.getBoundingClientRect().right < pricingTable.getBoundingClientRect().right) {
+        this.hasEmptySpace = true;
+        this.expandTableCells();
       }
     };
     this.resetWidthVariables = () => {
@@ -210,6 +196,7 @@ export class PtcPricingPackagingTable {
     this.scrollLimit = 50;
     this.stickyTopAt = undefined;
     this.columnHeaderLinks = [];
+    this.hasEmptySpace = false;
     this.showFillerCells = false;
     this.showCtaButtonsRow = undefined;
     this.ctaButtons = [];
@@ -460,6 +447,7 @@ export class PtcPricingPackagingTable {
       "scrollLimit": {},
       "stickyTopAt": {},
       "columnHeaderLinks": {},
+      "hasEmptySpace": {},
       "showFillerCells": {},
       "showCtaButtonsRow": {},
       "ctaButtons": {},

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

@@ -3,7 +3,7 @@ export class PtcNavLink {
   constructor() {
     this.href = undefined;
     this.isOutsideLink = false;
-    this.titleText = "";
+    this.titleText = '';
   }
   handleClick(event) {
     // Prevent the event from propagating to the underlying <a> element
@@ -13,27 +13,23 @@ export class PtcNavLink {
       // Find the corresponding section
       const section = document.querySelector(this.href);
       section.scrollIntoView({
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
       this.navLinkClicked.emit();
     }
   }
-  componentWillLoad() {
-    // Get the text content of the <slot> tag
-    const text = this.el.textContent;
-    // Set the maximum number of characters to display
-    const charLimit = 32;
-    // Check if the text content is longer than the character limit
-    if (text.length > charLimit) {
-      // Adding link text in title
-      this.titleText = text;
-      // Trim the text to the character limit and add "..."
-      this.el.textContent = text.substring(0, charLimit) + "...";
+  trimString(inputString, maxLength) {
+    if (inputString.length > maxLength) {
+      return inputString.slice(0, maxLength) + '...';
+    }
+    else {
+      return inputString;
     }
   }
   render() {
-    return (h(Host, null, h("a", { 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" })))));
+    return (h(Host, null, h("a", { href: this.href, target: this.isOutsideLink ? '_blank' : '_self', title: this.trimString(this.titleText, 24), 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"; }
@@ -100,7 +96,7 @@ export class PtcNavLink {
         },
         "attribute": "title-text",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "''"
       }
     };
   }